Skip to content

Commit 21ee18a

Browse files
Anou25Anou25
authored
Tic-Tac-Toe Game
1 parent d6b961a commit 21ee18a

File tree

3 files changed

+165
-171
lines changed

3 files changed

+165
-171
lines changed

‎index.html

+29-57
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,33 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Temperature Converter Website</title>
7-
<!-- css link -->
8-
<link rel="stylesheet" href="styles.css" />
9-
10-
<!-- box icons -->
11-
<link rel="stylesheet"
12-
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
13-
14-
<!-- font awesome -->
15-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
16-
17-
</head>
18-
<body>
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+
<div id="msg">Winner</div>
12+
<button id="new-btn">New Game</button>
13+
</div>
14+
<main>
15+
<h1><b><u>TIC TAC TOE</u></b></h1>
1916
<div class="container">
20-
<div class="temperature-converter">
21-
<div class="mobile">
22-
<p class="time">9.41 AM</p>
23-
<div>
24-
<i class='bx bx-signal-4'></i>
25-
<i class='bx bx-wifi' ></i>
26-
<i class='bx bxs-battery' ></i>
27-
</div>
28-
</div>
29-
30-
<h1 class="title">Temperature Converter</h1>
31-
32-
<div class="result">
33-
<span class="result-heading">Result (Celsius)</span>
34-
<h2 class="celsius-value" id="celsius"></h2>
35-
</div>
36-
37-
<!-- input field -->
38-
<div class="degree-type">
39-
<!-- for degrees -->
40-
<div class="degree-field">
41-
<label for="degree">Degrees</label>
42-
<input type="number" name="degree" id="degree" />
43-
</div>
44-
45-
<!-- for option selection -->
46-
<div class="temp-field">
47-
<label for="temp-type">Type</label>
48-
<select name="temperatures" id="temp-type" autocomplete="on">
49-
<option id="fahrenheit" value="fahrenheit">Fahrenheit</option>
50-
<option id="kelvin" value="kelvin">Kelvin</option>
51-
</select>
52-
</div>
53-
</div>
54-
<button id="convert-btn">Convert</button>
55-
56-
</div>
57-
</div>
58-
<!-- script tags -->
59-
<script src="app.js"></script>
60-
</body>
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 id="reset-btn">Reset Game</button>
30+
</main>
31+
<script src="script.js"></script>
32+
</body>
6133
</html>

‎script.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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;
8+
const winPatterns = [
9+
[0, 1, 2],
10+
[0, 3, 6],
11+
[0, 4, 8],
12+
[1, 4, 7],
13+
[2, 5, 8],
14+
[2, 4, 6],
15+
[3, 4, 5],
16+
[6, 7, 8],
17+
];
18+
19+
boxes.forEach((box) => {
20+
box.addEventListener("click", () => {
21+
if (turnO) {
22+
//playerO
23+
box.innerText = "O";
24+
box.style.color = "green";
25+
turnO = false;
26+
} else {
27+
//playerX
28+
box.innerText = "X";
29+
box.style.color = "red";
30+
turnO = true;
31+
}
32+
checkWinner();
33+
});
34+
});
35+
const disableBoxes = () => {
36+
for(let box of boxes){
37+
box.disabled = true;
38+
}
39+
};
40+
const enableBoxes = () => {
41+
for (let box of boxes) {
42+
box.disabled = false;
43+
box.innerText="";
44+
}
45+
};
46+
const checkWinner = () => {
47+
for (let pattern of winPatterns) {
48+
let pos1Val = boxes[pattern[0]].innerText;
49+
let pos2Val = boxes[pattern[1]].innerText;
50+
let pos3Val = boxes[pattern[2]].innerText;
51+
52+
if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
53+
if (pos1Val === pos2Val && pos2Val === pos3Val) {
54+
showWinner(pos1Val);
55+
return true;
56+
}
57+
}
58+
}
59+
};
60+
const showWinner = (winner) => {
61+
msg.innerText = `Congratulations, Winner is ${winner}`;
62+
msgContainer.classList.remove("hide");
63+
disableBoxes();
64+
};
65+
const resetGame = () => {
66+
turn0 = true;
67+
enableBoxes();
68+
msgContainer.classList.add("hide");
69+
};
70+
newGameBtn.addEventListener("click", resetGame);
71+
resetBtn.addEventListener("click", resetGame);

‎style.css

+65-114
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,69 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
21
* {
3-
margin: 0;
4-
padding: 0;
5-
box-sizing: border-box;
6-
font-family: "Open Sans", sans-serif;
2+
margin: 0;
3+
padding: 0;
74
}
85
body {
9-
display: flex;
10-
align-items: center;
11-
justify-content: center;
12-
min-height: 100vh;
13-
width: 100%;
14-
padding: 0 10px;
15-
}
16-
body::before {
17-
content: "";
18-
position: absolute;
19-
width: 100%;
20-
height: 100%;
21-
background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000;
22-
background-position: center;
23-
background-size: cover;
24-
}
25-
.wrapper {
26-
width: 400px;
27-
border-radius: 8px;
28-
padding: 30px;
29-
text-align: center;
30-
border: 1px solid rgba(255, 255, 255, 0.5);
31-
backdrop-filter: blur(9px);
32-
-webkit-backdrop-filter: blur(9px);
33-
}
34-
form {
35-
display: flex;
36-
flex-direction: column;
37-
}
38-
h2 {
39-
font-size: 2rem;
40-
margin-bottom: 20px;
41-
color: #fff;
42-
}
43-
.input-field {
44-
position: relative;
45-
border-bottom: 2px solid #ccc;
46-
margin: 15px 0;
47-
}
48-
.input-field label {
49-
position: absolute;
50-
top: 50%;
51-
left: 0;
52-
transform: translateY(-50%);
53-
color: #fff;
54-
font-size: 16px;
55-
pointer-events: none;
56-
transition: 0.15s ease;
57-
}
58-
.input-field input {
59-
width: 100%;
60-
height: 40px;
61-
background: transparent;
62-
border: none;
63-
outline: none;
64-
font-size: 16px;
65-
color: #fff;
66-
}
67-
.input-field input:focus~label,
68-
.input-field input:valid~label {
69-
font-size: 0.8rem;
70-
top: 10px;
71-
transform: translateY(-120%);
72-
}
73-
.forget {
74-
display: flex;
75-
align-items: center;
76-
justify-content: space-between;
77-
margin: 25px 0 35px 0;
78-
color: #fff;
79-
}
80-
#remember {
81-
accent-color: #fff;
82-
}
83-
.forget label {
84-
display: flex;
85-
align-items: center;
86-
}
87-
.forget label p {
88-
margin-left: 8px;
89-
}
90-
.wrapper a {
91-
color: #efefef;
92-
text-decoration: none;
93-
}
94-
.wrapper a:hover {
95-
text-decoration: underline;
96-
}
97-
button {
98-
background: #fff;
99-
color: #000;
100-
font-weight: 600;
101-
border: none;
102-
padding: 12px 20px;
103-
cursor: pointer;
104-
border-radius: 3px;
105-
font-size: 16px;
106-
border: 2px solid transparent;
107-
transition: 0.3s ease;
108-
}
109-
button:hover {
110-
color: #fff;
111-
border-color: #fff;
112-
background: rgba(255, 255, 255, 0.15);
113-
}
114-
.register {
115-
text-align: center;
116-
margin-top: 30px;
117-
color: #fff;
6+
background-color: #548687;
7+
text-align: center;
8+
}
9+
h1 {
10+
color: #ffffc7;
11+
}
12+
.container {
13+
height: 70vh;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
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+
.box {
28+
height: 18vmin;
29+
width: 18vmin;
30+
border-radius: 1rem;
31+
border: none;
32+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
33+
font-size: 8vmin;
34+
color: #b0413e;
35+
background-color: #ffffc7;
36+
}
37+
#reset-btn {
38+
padding: 1rem;
39+
font-size: 1.25rem;
40+
background-color: #191913;
41+
color: #fff;
42+
border-radius: 1rem;
43+
border: none;
44+
}
45+
#new-btn {
46+
padding: 1rem;
47+
font-size: 1.25rem;
48+
background-color: #191913;
49+
color: #fff;
50+
border-radius: 1rem;
51+
border: none;
52+
}
53+
54+
#msg {
55+
color: #ffffc7;
56+
font-size: 5vmin;
57+
}
58+
59+
.msg-container {
60+
height: 100vmin;
61+
display: flex;
62+
justify-content: center;
63+
align-items: center;
64+
flex-direction: column;
65+
gap: 4rem;
66+
}
67+
.hide {
68+
display: none;
11869
}

0 commit comments

Comments
 (0)