Skip to content

Commit f810c0b

Browse files
haseebhubhaseebhub
committed
tic
0 parents  commit f810c0b

7 files changed

+225
-0
lines changed

‎excited.gif

45.4 KB
Loading

‎gameover.mp3

46.1 KB
Binary file not shown.

‎index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>tic-tac-toe</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<nav>
14+
<ul>
15+
<li>MyTicTatToe.com</li>
16+
</ul>
17+
</nav>
18+
19+
<div class="gameContainer">
20+
<div class="container">
21+
<div class="box bt-0 bl-0"><span class="boxtext"></span></div>
22+
<div class="box bt-0"><span class="boxtext"></span></div>
23+
<div class="box bt-0 br-0"><span class="boxtext"></span></div>
24+
<div class="box bt-0 bl-0"><span class="boxtext"></span></div>
25+
<div class="box"><span class="boxtext"></span></div>
26+
<div class="box br-0"><span class="boxtext"></span></div>
27+
<div class="box bt-0 bl-0 bb-0"><span class="boxtext"></span></div>
28+
<div class="box bb-0"><span class="boxtext"></span></div>
29+
<div class="box bb-0 br-0"><span class="boxtext"></span></div>
30+
</div>
31+
<div class="gameInfo">
32+
<h1>Welcome to MYTIC TAC TOE</h1>
33+
<span class="info">Turn of X</span>
34+
<button id="reset">Reset</button>
35+
</div>
36+
<div class="imgbox">
37+
<img src="excited.gif">
38+
</div>
39+
</div>
40+
<script src="script.js"></script>
41+
</body>
42+
43+
</html>

‎music.mp3

10.9 MB
Binary file not shown.

‎script.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
console.log("Welcome to Tic Tac Toe")
2+
let music = new Audio("music.mp3")
3+
let audioTurn = new Audio("ting.mp3")
4+
let gameover = new Audio("gameover.mp3")
5+
let turn = "X"
6+
let isgameover = false;
7+
8+
// Function to change the turn
9+
const changeTurn = () => {
10+
return turn === "X" ? "0" : "X"
11+
}
12+
13+
// Function to check for win
14+
const checkWin = () => {
15+
let boxtext = document.getElementsByClassName("boxtext");
16+
let wins = [
17+
[0, 1, 2],
18+
[3, 4, 5],
19+
[6, 7, 8],
20+
[0, 3, 6],
21+
[1, 4, 7],
22+
[2, 5, 8],
23+
[0, 4, 8],
24+
[2, 4, 6],
25+
]
26+
27+
wins.forEach(e => {
28+
if ((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "")) {
29+
document.querySelector(".info").innerText = boxtext[e[0]].innerText + " " + "WON";
30+
isgameover = true;
31+
document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "200px";
32+
}
33+
})
34+
}
35+
36+
//Game logic
37+
music.play();
38+
let boxes = document.getElementsByClassName("box");
39+
Array.from(boxes).forEach(element => {
40+
let boxtext = element.querySelector(".boxtext");
41+
element.addEventListener("click", () => {
42+
if (boxtext.innerText === '') {
43+
boxtext.innerText = turn;
44+
turn = changeTurn();
45+
audioTurn.play();
46+
checkWin();
47+
if (!isgameover) {
48+
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
49+
}
50+
}
51+
});
52+
});
53+
54+
// Add event listener to reset button
55+
reset.addEventListener("click", () => {
56+
let boxtexts = document.querySelectorAll(".boxtext");
57+
Array.from(boxtexts).forEach(element => {
58+
element.innerText = "";
59+
});
60+
turn = "X";
61+
isgameover = false;
62+
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
63+
document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px";
64+
});
65+
66+

‎style.css

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
9+
nav ul {
10+
list-style: none;
11+
}
12+
13+
nav {
14+
background-color: rgb(208, 174, 87);
15+
color: aliceblue;
16+
height: 75px;
17+
font-size: 30px;
18+
display: flex;
19+
align-items: center;
20+
padding: 0 12px;
21+
font-family: 'Playfair Display', serif;
22+
}
23+
24+
.gameContainer {
25+
display: flex;
26+
justify-content: center;
27+
margin-top: 50px;
28+
}
29+
30+
.container {
31+
display: grid;
32+
grid-template-rows: repeat(3, 10vw);
33+
grid-template-columns: repeat(3, 10vw);
34+
font-family: 'Playfair Display', serif;
35+
}
36+
37+
.box {
38+
border: 2px solid indianred;
39+
font-size: 8vw;
40+
cursor: pointer;
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
}
45+
46+
.box:hover {
47+
background-color: aliceblue;
48+
}
49+
50+
.gameInfo {
51+
padding: 34px 34px;
52+
font-family: cursive;
53+
}
54+
55+
.gameInfo h1 {
56+
font-size: 1.5rem;
57+
}
58+
59+
60+
.imgbox img {
61+
width: 0;
62+
transition: width 1s ease-in-out;
63+
}
64+
65+
.bl-0 {
66+
border-left: 0;
67+
}
68+
69+
70+
.bt-0 {
71+
border-top: 0;
72+
}
73+
74+
75+
.bb-0 {
76+
border-bottom: 0;
77+
}
78+
79+
.br-0 {
80+
border-right: 0;
81+
}
82+
83+
#reset {
84+
margin: 0 23px;
85+
padding: 6px 24px;
86+
background-color: cadetblue;
87+
border-radius: 60px;
88+
cursor: pointer;
89+
font-family: cursive;
90+
font-weight: bolder;
91+
font-size: 1.1rem;
92+
}
93+
94+
.info {
95+
font-size: 27px;
96+
}
97+
98+
99+
@media screen and (max-width: 800px) {
100+
.gameContainer {
101+
flex-wrap: wrap;
102+
}
103+
104+
.gameContainer {
105+
margin-top: 34px;
106+
}
107+
108+
.gameInfo h1 {
109+
font-size: 1.5rem;
110+
}
111+
112+
.container {
113+
grid-template-rows: repeat(3, 20vw);
114+
grid-template-columns: repeat(3, 20vw);
115+
}
116+
}

‎ting.mp3

32.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)