Skip to content

Commit 615f290

Browse files
at9596at9596
committed
Ti Tac Toe game
0 parents  commit 615f290

File tree

3 files changed

+205
-0
lines changed

3 files changed

+205
-0
lines changed

‎app.js

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
let boxes = document.querySelectorAll(".box");
2+
let resetBtn = document.querySelector("#reset-btn");
3+
let newGameBtn = document.querySelector("#new-btn");
4+
let msgContainer = document.querySelector(".msg-container");
5+
let msg = document.querySelector("#msg");
6+
7+
let turnO = true; //playerX, playerO
8+
let count = 0; //To Track Draw
9+
10+
const winPatterns = [
11+
[0, 1, 2],
12+
[0, 3, 6],
13+
[0, 4, 8],
14+
[1, 4, 7],
15+
[2, 5, 8],
16+
[2, 4, 6],
17+
[3, 4, 5],
18+
[6, 7, 8],
19+
];
20+
21+
22+
const resetGame = () => {
23+
turnO = true;
24+
count = 0;
25+
enableBoxes();
26+
msgContainer.classList.add("hide");
27+
resetBtn.classList.add("hide");
28+
};
29+
30+
boxes.forEach((box) => {
31+
box.addEventListener("click", () => {
32+
if(resetBtn.classList.contains("hide")){
33+
resetBtn.classList.remove("hide");
34+
}
35+
if (turnO) {
36+
//playerO
37+
box.innerText = "O";
38+
turnO = false;
39+
box.style = 'background-color: #81B29A;';
40+
} else {
41+
//playerX
42+
box.innerText = "X";
43+
turnO = true;
44+
box.style = 'background-color: #F2CC8F;';
45+
}
46+
box.disabled = true;
47+
count++;
48+
49+
let isWinner = checkWinner();
50+
51+
if (count === 9 && !isWinner) {
52+
gameDraw();
53+
}
54+
});
55+
});
56+
57+
const gameDraw = () => {
58+
msg.innerText = `Game was a Draw.`;
59+
msgContainer.classList.remove("hide");
60+
disableBoxes();
61+
};
62+
63+
const disableBoxes = () => {
64+
for (let box of boxes) {
65+
box.disabled = true;
66+
}
67+
};
68+
69+
const enableBoxes = () => {
70+
for (let box of boxes) {
71+
box.disabled = false;
72+
box.innerText = "";
73+
}
74+
};
75+
76+
const showWinner = (winner) => {
77+
msg.innerText = `Congratulations, Winner is ${winner}`;
78+
msgContainer.classList.remove("hide");
79+
disableBoxes();
80+
};
81+
82+
const checkWinner = () => {
83+
for (let pattern of winPatterns) {
84+
let pos1Val = boxes[pattern[0]].innerText;
85+
let pos2Val = boxes[pattern[1]].innerText;
86+
let pos3Val = boxes[pattern[2]].innerText;
87+
88+
if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
89+
if (pos1Val === pos2Val && pos2Val === pos3Val) {
90+
showWinner(pos1Val);
91+
return true;
92+
}
93+
}
94+
}
95+
};
96+
97+
newGameBtn.addEventListener("click", resetGame);
98+
resetBtn.addEventListener("click", resetGame);

‎index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Tic-Tac-Toe Game</title>
7+
<link rel="stylesheet" href="./style.css" />
8+
</head>
9+
<body>
10+
<div class="msg-container hide">
11+
<p id="msg">Winner</p>
12+
<button id="new-btn">New Game</button>
13+
</div>
14+
<main>
15+
<h1>Tic Tac Toe</h1>
16+
<div class="container">
17+
<div class="game">
18+
<button class="box"></button>
19+
<button class="box"></button>
20+
<button class="box"></button>
21+
<button class="box"></button>
22+
<button class="box"></button>
23+
<button class="box"></button>
24+
<button class="box"></button>
25+
<button class="box"></button>
26+
<button class="box"></button>
27+
</div>
28+
</div>
29+
<button class= 'hide' id="reset-btn">Reset Game</button>
30+
</main>
31+
<script src="./app.js"></script>
32+
</body>
33+
</html>

‎style.css

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
background-color: #548687;
8+
text-align: center;
9+
}
10+
11+
.container {
12+
height: 70vh;
13+
display: flex;
14+
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.game {
20+
height: 60vmin;
21+
width: 60vmin;
22+
display: flex;
23+
flex-wrap: wrap;
24+
justify-content: center;
25+
align-items: center;
26+
gap: 1.5vmin;
27+
}
28+
29+
.box {
30+
height: 18vmin;
31+
width: 18vmin;
32+
border-radius: 1rem;
33+
border: none;
34+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
35+
font-size: 8vmin;
36+
color: #b0413e;
37+
background-color: #ffffc7;
38+
}
39+
40+
#reset-btn {
41+
padding: 1rem;
42+
font-size: 1.25rem;
43+
background-color: #191913;
44+
color: #fff;
45+
border-radius: 1rem;
46+
border: none;
47+
}
48+
49+
#new-btn {
50+
padding: 1rem;
51+
font-size: 1.25rem;
52+
background-color: #191913;
53+
color: #fff;
54+
border-radius: 1rem;
55+
border: none;
56+
}
57+
58+
#msg {
59+
color: #ffffc7;
60+
font-size: 5vmin;
61+
}
62+
63+
.msg-container {
64+
height: 100vmin;
65+
display: flex;
66+
justify-content: center;
67+
align-items: center;
68+
flex-direction: column;
69+
gap: 4rem;
70+
}
71+
72+
.hide {
73+
display: none;
74+
}

0 commit comments

Comments
 (0)