Skip to content

Commit 3b9fb61

Browse files
marleyDipmarleyDip
committed
DOM, function, Array
1 parent 1886cb1 commit 3b9fb61

File tree

3 files changed

+219
-0
lines changed

3 files changed

+219
-0
lines changed

‎Projects/TicTacToe/app.js‎

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

‎Projects/TicTacToe/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
10+
<body>
11+
<div class="msg-container hide">
12+
<p id="msg">Winner</p>
13+
<button id="new-btn">New Game</button>
14+
</div>
15+
16+
<main>
17+
<h1>Tic Tac Toe</h1>
18+
<div class="container">
19+
<div class="game">
20+
<button class="box"></button>
21+
<!-- index 0 -->
22+
<button class="box"></button>
23+
<!-- index 1 -->
24+
<button class="box"></button>
25+
<!-- index 2 -->
26+
<button class="box"></button>
27+
<!-- index 3 -->
28+
<button class="box"></button>
29+
<!-- index 4 -->
30+
<button class="box"></button>
31+
<!-- index 5 -->
32+
<button class="box"></button>
33+
<!-- index 6 -->
34+
<button class="box"></button>
35+
<!-- index 7 -->
36+
<button class="box"></button> <!-- index 8 -->
37+
</div>
38+
</div>
39+
40+
<button id="reset-btn">Reset Game</button>
41+
</main>
42+
43+
<script src="app.js"></script>
44+
</body>
45+
</html>

‎Projects/TicTacToe/style.css‎

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

0 commit comments

Comments
 (0)