Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 60f085d

Browse files
create tic-tac-toe game
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 5fca555 commit 60f085d

File tree

3 files changed

+211
-0
lines changed

3 files changed

+211
-0
lines changed

‎Vanila-JS/tic-tac-toe/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Tic Tac Toe</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h1>Tic Tac Toe</h1>
14+
<div id="game-container" class="game-container">
15+
<span data-index="0-0" class="cell"></span>
16+
<span data-index="0-1" class="cell"></span>
17+
<span data-index="0-2" class="cell"></span>
18+
<span data-index="1-0" class="cell"></span>
19+
<span data-index="1-1" class="cell"></span>
20+
<span data-index="1-2" class="cell"></span>
21+
<span data-index="2-0" class="cell"></span>
22+
<span data-index="2-1" class="cell"></span>
23+
<span data-index="2-2" class="cell"></span>
24+
</div>
25+
<button id="reset" class="reset">Reset</button>
26+
<span id="won" class="won"></span>
27+
</div>
28+
<script src="index.js"></script>
29+
</body>
30+
</html>

‎Vanila-JS/tic-tac-toe/index.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
const gameContainer = document.getElementById("game-container");
2+
const reset = document.getElementById("reset");
3+
let hash = {};
4+
let chance = true;
5+
let allFilled = 0;
6+
7+
gameContainer.addEventListener("click", function (e) {
8+
if (e.target.dataset.index) {
9+
if (!hash[e.target.dataset.index]) {
10+
if (chance) {
11+
hash[e.target.dataset.index] = "X";
12+
e.target.classList.add("cell-withX");
13+
} else {
14+
hash[e.target.dataset.index] = "O";
15+
e.target.classList.add("cell-withO");
16+
}
17+
18+
chance = !chance;
19+
allFilled++;
20+
21+
let result = checkWin();
22+
if (allFilled == 9 || result.includes("Win")) {
23+
document.getElementById("won").textContent = result;
24+
gameContainer.style.pointerEvents = "none";
25+
}
26+
}
27+
}
28+
});
29+
30+
reset.addEventListener("click", function (e) {
31+
const cells = document.querySelectorAll(".cell");
32+
33+
cells.forEach((val) => {
34+
if (val.classList.contains("cell-withX")) {
35+
val.classList.remove("cell-withX");
36+
} else {
37+
val.classList.remove("cell-withO");
38+
}
39+
});
40+
41+
hash = {};
42+
allFilled = 0;
43+
chance = true;
44+
document.getElementById("won").textContent = "";
45+
gameContainer.style.pointerEvents = "auto";
46+
});
47+
48+
function checkWin() {
49+
//row
50+
for (let i = 0; i < 3; i++) {
51+
let set = new Set();
52+
let player = "";
53+
for (let j = 0; j < 3; j++) {
54+
let key = `${i}-${j}`;
55+
set.add(hash[key]);
56+
player = hash[key];
57+
}
58+
59+
if (set.size == 1 && player) {
60+
return `Player ${player} Win`;
61+
}
62+
}
63+
64+
//col
65+
for (let i = 0; i < 3; j++) {
66+
let set = new Set();
67+
let player = "";
68+
for (let j = 0; j < 3; i++) {
69+
let key = `${j}-${i}`;
70+
set.add(hash[key]);
71+
player = hash[key];
72+
}
73+
console.log(set, player);
74+
if (set.size == 1 && player) {
75+
return `Player ${player} Win`;
76+
}
77+
}
78+
79+
// diagonal
80+
let i = 0,
81+
j = 0;
82+
let set = new Set();
83+
let player = "";
84+
while (i < 3 && j < 3) {
85+
let key = `${i}-${j}`;
86+
set.add(hash[key]);
87+
player = hash[key];
88+
i++;
89+
j++;
90+
}
91+
92+
if (set.size == 1 && player) {
93+
return `Player ${player} Win`;
94+
}
95+
96+
// anti-daiagonal
97+
(i = 0), (j = 2);
98+
set.clear();
99+
while (i < 3 && j >= 0) {
100+
let key = `${i}-${j}`;
101+
set.add(hash[key]);
102+
player = hash[key];
103+
i++;
104+
j--;
105+
}
106+
107+
if (set.size == 1 && player) {
108+
return `Player ${player} Win`;
109+
}
110+
111+
return "Match draw";
112+
}

‎Vanila-JS/tic-tac-toe/styles.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
}
8+
9+
.game-container {
10+
display: grid;
11+
grid-template-columns: auto auto auto;
12+
column-gap: 10px;
13+
row-gap: 10px;
14+
}
15+
16+
.cell {
17+
width: 100px;
18+
height: 100px;
19+
cursor: pointer;
20+
}
21+
22+
.cell:nth-child(1),
23+
.cell:nth-child(3),
24+
.cell:nth-child(5),
25+
.cell:nth-child(7),
26+
.cell:nth-child(9) {
27+
background-color: #c0dd11;
28+
}
29+
30+
.cell:nth-child(2),
31+
.cell:nth-child(4),
32+
.cell:nth-child(6),
33+
.cell:nth-child(8) {
34+
background-color: #73af1a;
35+
}
36+
37+
.cell-withX::before {
38+
content: "2716円";
39+
font-size: 100px;
40+
color: white;
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
}
45+
46+
.cell-withO::before {
47+
content: "O";
48+
font-size: 100px;
49+
color: white;
50+
display: flex;
51+
justify-content: center;
52+
align-items: center;
53+
}
54+
55+
.reset {
56+
margin-top: 20px;
57+
font-size: 20px;
58+
border: 0;
59+
border-radius: 5px;
60+
height: 30px;
61+
background-color: #c0dd11;
62+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
63+
cursor: pointer;
64+
}
65+
66+
.won {
67+
margin-top: 20px;
68+
font-size: 25px;
69+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /