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 1278086

Browse files
fix tic-tac-toe code
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 9d29277 commit 1278086

File tree

3 files changed

+146
-158
lines changed

3 files changed

+146
-158
lines changed

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

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,32 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<metahttp-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>Tic Tac Toe</title>
6+
<title>Tic-Tac-Toe Game</title>
7+
<!-- <link rel="stylesheet" href="styles.css" /> -->
88
<link rel="stylesheet" href="styles.css" />
99
</head>
10-
1110
<body>
12-
<div class="container">
11+
<div class="msg-container hide">
12+
<p id="msg">Winner</p>
13+
<button id="new-btn">New Game</button>
14+
</div>
15+
<main>
1316
<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>
17+
<div class="container">
18+
<div class="game">
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+
<button class="box"></button>
28+
</div>
2429
</div>
25-
<button id="reset" class="reset">Reset</button>
26-
<span id="won" class="won"></span>
27-
</div>
30+
<button id="reset-btn">Reset Game</button>
31+
</main>
2832
<script src="index.js"></script>
2933
</body>
3034
</html>

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

Lines changed: 72 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,91 @@
1-
constgameContainer = document.getElementById("game-container");
2-
constreset = document.getElementById("reset");
3-
let hash = {};
4-
let chance = true;
5-
let allFilled = 0;
1+
letboxes = document.querySelectorAll(".box");
2+
letresetBtn = document.querySelector("#reset-btn");
3+
let newGameBtn = document.querySelector("#new-btn");
4+
let msgContainer = document.querySelector(".msg-container");
5+
let msg = document.querySelector("#msg");
66

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-
}
7+
let turnO = true; //playerX, playerO
8+
let count = 0; //To Track Draw
179

18-
chance = !chance;
19-
allFilled++;
10+
const winPatterns = [
11+
[0, 1, 2],
12+
[0, 3, 6],
13+
[0, 4, 8],
14+
[1, 4, 7],
15+
[2, 5, 8],
16+
[2, 4, 6],
17+
[3, 4, 5],
18+
[6, 7, 8],
19+
];
2020

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-
});
21+
const resetGame = () => {
22+
turnO = true;
23+
count = 0;
24+
enableBoxes();
25+
msgContainer.classList.add("hide");
26+
};
2927

30-
reset.addEventListener("click",function(e) {
31-
constcells=document.querySelectorAll(".cell");
32-
33-
cells.forEach((val)=>{
34-
if(val.classList.contains("cell-withX")){
35-
val.classList.remove("cell-withX");
28+
boxes.forEach((box)=> {
29+
box.addEventListener("click",()=>{
30+
if(turnO){
31+
//playerO
32+
box.innerText="O";
33+
turnO=false;
3634
} else {
37-
val.classList.remove("cell-withO");
35+
//playerX
36+
box.innerText = "X";
37+
turnO = true;
3838
}
39-
});
39+
box.disabled = true;
40+
count++;
4041

41-
hash = {};
42-
allFilled = 0;
43-
chance = true;
44-
document.getElementById("won").textContent = "";
45-
gameContainer.style.pointerEvents = "auto";
46-
});
42+
let isWinner = checkWinner();
4743

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];
44+
if (count === 9 && !isWinner) {
45+
gameDraw();
5746
}
47+
});
48+
});
5849

59-
if (set.size == 1 && player) {
60-
return `Player ${player} Win`;
61-
}
62-
}
50+
const gameDraw = () => {
51+
msg.innerText = `Game was a Draw.`;
52+
msgContainer.classList.remove("hide");
53+
disableBoxes();
54+
};
6355

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-
}
56+
const disableBoxes = () => {
57+
for (let box of boxes) {
58+
box.disabled = true;
7759
}
60+
};
7861

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++;
62+
const enableBoxes = () => {
63+
for (let box of boxes) {
64+
box.disabled = false;
65+
box.innerText = "";
9066
}
67+
};
9168

92-
if (set.size == 1 && player) {
93-
return `Player ${player} Win`;
94-
}
69+
const showWinner = (winner) => {
70+
msg.innerText = `Congratulations, Winner is ${winner}`;
71+
msgContainer.classList.remove("hide");
72+
disableBoxes();
73+
};
9574

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-
}
75+
const checkWinner = () => {
76+
for (let pattern of winPatterns) {
77+
let pos1Val = boxes[pattern[0]].innerText;
78+
let pos2Val = boxes[pattern[1]].innerText;
79+
let pos3Val = boxes[pattern[2]].innerText;
10680

107-
if (set.size == 1 && player) {
108-
return `Player ${player} Win`;
81+
if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
82+
if (pos1Val === pos2Val && pos2Val === pos3Val) {
83+
showWinner(pos1Val);
84+
return true;
85+
}
86+
}
10987
}
88+
};
11089

111-
return"Match draw";
112-
}
90+
newGameBtn.addEventListener("click",resetGame);
91+
resetBtn.addEventListener("click",resetGame);

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

Lines changed: 53 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,74 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
background-color: #548687;
8+
text-align: center;
9+
}
10+
111
.container {
12+
height: 70vh;
213
display: flex;
3-
flex-direction: column;
14+
415
justify-content: center;
516
align-items: center;
6-
height: 100vh;
717
}
818

9-
.game-container {
10-
display: grid;
11-
grid-template-columns: auto auto auto;
12-
column-gap: 10px;
13-
row-gap: 10px;
19+
.game {
20+
height: 60vmin;
21+
width: 60vmin;
22+
display: flex;
23+
flex-wrap: wrap;
24+
justify-content: center;
25+
align-items: center;
26+
gap: 1.5vmin;
1427
}
1528

16-
.cell {
17-
width: 100px;
18-
height: 100px;
19-
cursor: pointer;
29+
.box {
30+
height: 18vmin;
31+
width: 18vmin;
32+
border-radius: 1rem;
33+
border: none;
34+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
35+
font-size: 8vmin;
36+
color: #b0413e;
37+
background-color: #ffffc7;
2038
}
2139

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;
40+
#reset-btn {
41+
padding: 1rem;
42+
font-size: 1.25rem;
43+
background-color: #191913;
44+
color: #fff;
45+
border-radius: 1rem;
46+
border: none;
2847
}
2948

30-
.cell:nth-child(2),
31-
.cell:nth-child(4),
32-
.cell:nth-child(6),
33-
.cell:nth-child(8) {
34-
background-color: #73af1a;
49+
#new-btn {
50+
padding: 1rem;
51+
font-size: 1.25rem;
52+
background-color: #191913;
53+
color: #fff;
54+
border-radius: 1rem;
55+
border: none;
3556
}
3657

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;
58+
#msg {
59+
color: #ffffc7;
60+
font-size: 5vmin;
4461
}
4562

46-
.cell-withO::before {
47-
content: "O";
48-
font-size: 100px;
49-
color: white;
50-
display: flex;
63+
.msg-container {
64+
height: 100vmin;
65+
display: flex;
5166
justify-content: center;
5267
align-items: center;
68+
flex-direction: column;
69+
gap: 4rem;
5370
}
5471

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;
72+
.hide {
73+
display: none;
6974
}

0 commit comments

Comments
(0)

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