Skip to content

Commit 63f0e88

Browse files
Shreekant-04Shreekant-04
committed
Tic tac toe game added.
1 parent 39d4887 commit 63f0e88

File tree

9 files changed

+269
-4
lines changed

9 files changed

+269
-4
lines changed

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -248,5 +248,10 @@
248248
<td><a href="gsap-1">Gsap Animation Library</a></td>
249249
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/gsap-1/">Link</a></td>
250250
</tr>
251+
<tr>
252+
<td>48</td>
253+
<td><a href="Tic-Tac-Toe">Tic-Tac-Toe Game</a></td>
254+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/Tic-Tac-Toe/">Link</a></td>
255+
</tr>
251256
</tbody>
252257
</table>

‎Tic-Tac-Toe/fav.png

16.4 KB
Loading

‎Tic-Tac-Toe/index.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="shortcut icon" href="./fav.png" type="image/x-icon" />
9+
</head>
10+
<body>
11+
<h1>Tic Tac Toe</h1>
12+
<section class="player1">
13+
<h2>Player 1 (<span>⭕</span>)</h2>
14+
<h3 class="score">00</h3>
15+
</section>
16+
<section class="game">
17+
<div class="block-wrapper">
18+
<button class="block"></button>
19+
<button class="block"></button>
20+
<button class="block"></button>
21+
<button class="block"></button>
22+
<button class="block"></button>
23+
<button class="block"></button>
24+
<button class="block"></button>
25+
<button class="block"></button>
26+
<button class="block"></button>
27+
</div>
28+
<div class="result" style="color: green">Player 1 won the game</div>
29+
<div class="buttons">
30+
<button class="reset-game">Reset Game</button
31+
><button class="reset-score">Reset Score</button>
32+
</div>
33+
</section>
34+
<section class="player2">
35+
<h2>Player 2 (<span>❌</span>)</h2>
36+
<h3 class="score">00</h3>
37+
</section>
38+
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

‎Tic-Tac-Toe/script.js

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
console.log("hello");
2+
//accessing all elements
3+
const blocks = document.querySelectorAll(".block");
4+
const resetBtn = document.querySelector(".reset-game");
5+
const resetScoreBtn = document.querySelector(".reset-score");
6+
const score = document.querySelectorAll(".score");
7+
const result = document.querySelector(".result");
8+
let player = false; //true for player1 and false for player 2
9+
10+
// winning pattern
11+
const winPatterns = [
12+
[0, 1, 2],
13+
[0, 3, 6],
14+
[0, 4, 8],
15+
[3, 4, 5],
16+
[1, 4, 7],
17+
[2, 5, 8],
18+
[6, 7, 8],
19+
[2, 4, 6],
20+
];
21+
22+
let count = 0;
23+
24+
// creating functions
25+
26+
// reset game
27+
function resetGame() {
28+
blocks.forEach((block) => {
29+
block.innerText = "";
30+
block.disabled = false;
31+
});
32+
result.style.visibility = "hidden";
33+
player = false;
34+
count = 0;
35+
}
36+
//reset game and score
37+
function resetAll() {
38+
let confirm = window.confirm("are you sure");
39+
if (confirm) {
40+
resetGame();
41+
player1 = 0;
42+
player2 = 0;
43+
score.forEach((el) => (el.innerText = "00"));
44+
}
45+
}
46+
47+
// tie
48+
const tie = () => {
49+
result.innerText = "A battle of equals! The game ends in a thrilling tie!";
50+
result.style.color = "red";
51+
result.style.visibility = "visible";
52+
};
53+
// checking winner by comparing to winner pattern
54+
const checkWinner = () => {
55+
for (let pattern of winPatterns) {
56+
let val1 = blocks[pattern[0]].innerText;
57+
let val2 = blocks[pattern[1]].innerText;
58+
let val3 = blocks[pattern[2]].innerText;
59+
60+
if (val1 != "" && val2 != "" && val3 != "") {
61+
if (val1 === val2 && val2 === val3) {
62+
showWinner(val1);
63+
}
64+
}
65+
}
66+
67+
if (count === 9) {
68+
tie();
69+
}
70+
};
71+
let player1 = 0;
72+
let player2 = 0;
73+
const showWinner = (winner) => {
74+
winner === "⭕"
75+
? (result.innerText = `Champions! Player 1 takes the game!`)
76+
: (result.innerText = `Champions! Player 2 takes the game!`);
77+
78+
winner === "⭕" ? player1++ : player2++;
79+
blocks.forEach((block) => (block.disabled = true)); // disabling all buttons
80+
document.querySelector(".player1 h3").innerText =
81+
player1 < 9 ? `0${player1}` : player1; // updating player 1 score
82+
document.querySelector(".player2 h3").innerText =
83+
player2 < 9 ? `0${player2}` : player2; // updating player 2 score
84+
85+
result.style.visibility = "visible";
86+
result.style.color = "green";
87+
};
88+
89+
// calling functions on events
90+
resetBtn.addEventListener("click", resetGame);
91+
resetScoreBtn.addEventListener("click", resetAll);
92+
blocks.forEach((block) =>
93+
block.addEventListener("click", () => {
94+
player = !player;
95+
if (player) {
96+
block.innerText = "⭕";
97+
} else {
98+
block.innerText = "❌";
99+
}
100+
count++;
101+
block.disabled = true;
102+
checkWinner();
103+
})
104+
);

‎Tic-Tac-Toe/style.css

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
font-family: poppins, sans-serif;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
height: 100vh;
11+
display: flex;
12+
flex-wrap: wrap;
13+
align-items: start;
14+
justify-content: space-evenly;
15+
padding: 10px;
16+
background-color: #f8f9fa;
17+
}
18+
19+
.player1,
20+
.player2 {
21+
width: 20%;
22+
height: 20%;
23+
padding: 10px;
24+
text-align: center;
25+
box-shadow: 0 0 10px;
26+
}
27+
section {
28+
border-radius: 20px;
29+
}
30+
h1 {
31+
width: 100%;
32+
height: 10vmin;
33+
text-align: center;
34+
line-height: 10vmin;
35+
font-size: calc(10px + 2.5vw);
36+
}
37+
.game {
38+
width: 40%;
39+
min-height: 80vh;
40+
padding: 10px;
41+
display: flex;
42+
flex-direction: column;
43+
justify-content: space-evenly;
44+
align-items: center;
45+
}
46+
.block-wrapper {
47+
display: grid;
48+
width: max-content;
49+
grid-template-columns: repeat(3, 1fr);
50+
}
51+
.block {
52+
border: 2px solid black;
53+
height: 12vmin;
54+
width: 12vmin;
55+
display: flex;
56+
justify-content: center;
57+
align-items: center;
58+
font-size: calc(10px + 1.5vw);
59+
background-color: transparent;
60+
}
61+
.block:nth-child(7),
62+
.block:nth-child(8),
63+
.block:nth-child(9) {
64+
border-bottom: none;
65+
}
66+
.block:nth-child(1),
67+
.block:nth-child(2),
68+
.block:nth-child(3) {
69+
border-top: none;
70+
}
71+
.block:nth-child(1),
72+
.block:nth-child(4),
73+
.block:nth-child(7) {
74+
border-left: none;
75+
}
76+
.block:nth-child(3),
77+
.block:nth-child(6),
78+
.block:nth-child(9) {
79+
border-right: none;
80+
}
81+
.result {
82+
font-size: calc(10px + 1vw);
83+
height: 8vmin;
84+
width: 90%;
85+
text-align: center;
86+
visibility: hidden;
87+
}
88+
.buttons {
89+
width: 90%;
90+
height: 8vmin;
91+
display: flex;
92+
justify-content: space-evenly;
93+
align-items: center;
94+
}
95+
.buttons > button {
96+
height: 100%;
97+
width: 40%;
98+
border: none;
99+
border-radius: 20px;
100+
background-color: #00b4d8;
101+
font-size: calc(10px + 0.6vw);
102+
padding: 5px;
103+
cursor: pointer;
104+
font-weight: 900;
105+
}
106+
107+
.buttons > button:active {
108+
transform: scale(1.05);
109+
}

‎clock/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const updateTime = () => {
99
// Get current time and calculate degrees for clock hands
1010
let date = new Date(),
1111
secToDeg = date.getSeconds() * 6,
12-
minToDeg = date.getMinutes() * 6,
12+
minToDeg = date.getMinutes() * 6 + date.getSeconds() * (360 / 3600),
1313
hrToDeg = 30 * date.getHours() + date.getMinutes() / 2;
1414
// Rotate the clock hands to the appropriate degree based on the current time
1515
secondHand.style.transform = `rotate(${secToDeg}deg)`;

‎clock/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
</div>
8181
</div>
8282
</section>
83-
<section class="stopwatch">
83+
<!-- <section class="stopwatch">
8484
<h3>StopWatch</h3>
8585
<div class="stopwatch-container">
8686
<span class="stop-hour">00</span>
@@ -93,7 +93,7 @@ <h3>StopWatch</h3>
9393
<input type="checkbox" name="check" id="check" />
9494
<label for="check" class="start-stop">Start / Stop</label>
9595
<label class="reset">Reset</label>
96-
</section>
96+
</section> -->
9797
<script src="app.js"></script>
9898
</body>
9999
</html>

‎gsap-1/index.html

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<title>Gsap-1</title>
77
<link rel="stylesheet" href="style.css" />
88
<link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
9-
109
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
1110
</head>
1211
<body>

‎index.html

+7
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,13 @@
357357
<a href="./gsap-1/" target="_blank">Link</a>
358358
</td>
359359
</tr>
360+
<tr>
361+
<td>48</td>
362+
<td>Tic-Tac-Toe Game</td>
363+
<td>
364+
<a href="./Tic-Tac-Toe/" target="_blank">Link</a>
365+
</td>
366+
</tr>
360367
</tbody>
361368
</table>
362369
</body>

0 commit comments

Comments
 (0)