├── css
└── style.css
├── index.html
└── js
└── script.js
/css/style.css:
--------------------------------------------------------------------------------
1 | .box {
2 | border: 1px solid black;
3 | border-radius: 5px;
4 | display: flex;
5 | width: 25rem;
6 | height: 25rem;
7 | margin: 2vh auto;
8 | justify-content: center;
9 | align-items: center;
10 | flex-wrap: wrap;
11 |
12 | }
13 |
14 | .box>.row {
15 | border: 2px solid black;
16 | border-collapse: collapse;
17 | width: 8rem;
18 | height: 8rem;
19 | font-size: 3rem;
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | }
24 |
25 | .choose {
26 | width: 70vw;
27 | height: 20vh;
28 | position: absolute;
29 | background-color: cadetblue;
30 | padding: 1% 5%;
31 | border: 2px solid black;
32 | border-radius: 10px;
33 | text-align: center;
34 | margin: 10% 10%;
35 | /* display: none; */
36 | }
37 |
38 | .choose>.btn {
39 | color: black;
40 | padding: 1% 2%;
41 | border: 2px solid black;
42 | background-color: aquamarine;
43 | border-radius: 5px;
44 | font-size: 1rem;
45 |
46 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Tic Tac Game
11 |
12 |
13 |
14 |
15 | Tic Tac Game
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
28 |
Choose Your Symbol
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | function symbol(btnid) {
2 |
3 | if (btnid.id === 'circle') {
4 | let res = document.getElementById('res').value = 'circle'
5 | let circlebtn = document.getElementById("circle")
6 | circlebtn.style.backgroundColor = "rgb(49, 129, 102)"
7 |
8 | let crossbtn = document.getElementById("cross")
9 | crossbtn.style.backgroundColor = " aquamarine"
10 | return 'circle'
11 | }
12 | else if (btnid.id === 'cross') {
13 | let res = document.getElementById('res').value = 'cross'
14 | let crossbtn = document.getElementById("cross")
15 | crossbtn.style.backgroundColor = "rgb(49, 129, 102)"
16 |
17 |
18 | let circlebtn = document.getElementById("circle")
19 | circlebtn.style.backgroundColor = " aquamarine"
20 |
21 | return 'cross'
22 | }
23 | }
24 |
25 |
26 | function tictac(boxid) {
27 | let res = document.getElementById('res').value;
28 | if (res === 'circle' && boxid.innerText === "") {
29 | boxid.innerText = '⭕';
30 | }
31 | else if (res === 'cross' && boxid.innerText === "") {
32 | boxid.innerText = '\u274C';
33 | }
34 |
35 |
36 | let box1 = document.getElementById('box1').innerText
37 | let box2 = document.getElementById('box2').innerText
38 | let box3 = document.getElementById('box3').innerText
39 | let box4 = document.getElementById('box4').innerText
40 | let box5 = document.getElementById('box5').innerText
41 | let box6 = document.getElementById('box6').innerText
42 | let box7 = document.getElementById('box7').innerText
43 | let box8 = document.getElementById('box8').innerText
44 | let box9 = document.getElementById('box9').innerText
45 | let cross = '\u274C';
46 | let circle = '⭕';
47 |
48 | if (box1 === circle && box2 === circle && box3 === circle || box4 === circle && box5 === circle && box6 === circle || box7 === circle && box8 === circle && box9 === circle || box1 === circle && box4 === circle && box7 === circle || box2 === circle && box5 === circle && box8 === circle || box3 === circle && box6 === circle && box9 === circle || box1 === circle && box5 === circle && box9 === circle || box3 === circle && box5 === circle && box7 === circle) {
49 |
50 | let boxs = document.querySelectorAll(".row")
51 | for (let box of boxs) {
52 | box.innerHTML = ""
53 | }
54 | alert("circle win")
55 |
56 | }
57 | else if (box1 === cross && box2 === cross && box3 === cross || box4 === cross && box5 === cross && box6 === cross || box7 === cross && box8 === cross && box9 === cross || box1 === cross && box4 === cross && box7 === cross || box2 === cross && box5 === cross && box8 === cross || box3 === cross && box6 === cross && box9 === cross || box1 === cross && box5 === cross && box9 === cross || box3 === cross && box5 === cross && box7 === cross) {
58 | let boxs = document.querySelectorAll(".row")
59 | for (let box of boxs) {
60 | box.innerHTML = ""
61 | }
62 | alert("cross win")
63 |
64 | }
65 | if (box1 != "" && box2 != "" && box3 != "" && box4 != "" && box5 != "" && box6 != "" && box7 != "" && box8 != "" && box9 != "") {
66 |
67 | let boxs = document.querySelectorAll(".row")
68 | for (let box of boxs) {
69 | box.innerHTML = ""
70 | }
71 | alert("draw")
72 | }
73 |
74 | }
75 |
76 |
77 | // function sample(array) {
78 | // return array[Math.floor(Math.random() * array.length)];
79 | // }
80 | // function pcmove(boxid){
81 | // let res = document.getElementById('res').value;
82 | // if (res === 'circle') {
83 | // var pcSymbol = '\u274C';
84 | // }
85 | // else if (res === 'cross') {
86 | // var pcSymbol = '⭕';
87 | // }
88 |
89 | // let box1 = document.getElementById('box1')
90 | // let box2 = document.getElementById('box2')
91 | // let box3 = document.getElementById('box3')
92 | // let box4 = document.getElementById('box4')
93 | // let box5 = document.getElementById('box5')
94 | // let box6 = document.getElementById('box6')
95 | // let box7 = document.getElementById('box7')
96 | // let box8 = document.getElementById('box8')
97 | // let box9 = document.getElementById('box9')
98 | // pcbox = sample([box1, box2, box3, box4, box5, box6, box7, box8, box9])
99 |
100 | // if (pcbox.innerHTML === "") {
101 |
102 | // pcbox.innerHTML = pcSymbol;
103 | // }
104 |
105 | // console.log (pcbox , pcSymbol)
106 |
107 | // }
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------