Skip to content

Commit b2afb12

Browse files
thinkswellthinkswell
authored
Merge pull request #662 from Abhii-07/tictactoe-Abhii-07
Tic-Tac-Toe project Abhi-07
2 parents 2244901 + e6e90d0 commit b2afb12

File tree

5 files changed

+316
-0
lines changed

5 files changed

+316
-0
lines changed

‎TicTacToeGame/Abhii-07/Index.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
*,
2+
*::after,
3+
*::before {
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
:root {
9+
--cell-size: 100px;
10+
--mark-size: calc(var(--cell-size) * 0.5);
11+
}
12+
13+
body {
14+
margin: 0;
15+
text-align: center;
16+
}
17+
18+
.board {
19+
width: 100vw;
20+
margin: 20px;
21+
display: grid;
22+
justify-content: center;
23+
align-content: center;
24+
justify-items: center;
25+
align-items: center;
26+
grid-template-columns: repeat(3, auto);
27+
}
28+
29+
.board.game-ended, .board.disabled {
30+
pointer-events: none;
31+
}
32+
33+
.load-btn {
34+
background: lightskyblue;
35+
padding: 10px;
36+
border: none;
37+
border-radius: 5px;
38+
margin: 0 15px;
39+
box-shadow: rgb(16 24 28 / 50%) -1px 5px 8px 0px;
40+
}
41+
42+
.cell {
43+
width: var(--cell-size);
44+
height: var(--cell-size);
45+
border: 1px solid blue;
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
position: relative;
50+
cursor: pointer;
51+
}
52+
53+
#game-box {
54+
display: none;
55+
}
56+
57+
.cell.x,
58+
.cell.circle {
59+
pointer-events: none;
60+
}
61+
62+
.cell.x::before,
63+
.cell.x::after,
64+
.cell.circle::before {
65+
background-color: blue;
66+
}
67+
68+
.cell.x::before,
69+
.cell.x::after {
70+
content: '';
71+
position: absolute;
72+
width: calc(var(--mark-size) * 0.15);
73+
height: var(--mark-size);
74+
}
75+
76+
.cell.x::before {
77+
transform: rotate(45deg);
78+
}
79+
80+
.cell.x::after {
81+
transform: rotate(-45deg);
82+
}
83+
84+
.cell.circle::before,
85+
.cell.circle::after,
86+
.board.circle .cell:not(.x):not(.circle):hover::before,
87+
.board.circle .cell:not(.x):not(.circle):hover::after {
88+
content: '';
89+
position: absolute;
90+
border-radius: 50%;
91+
}
92+
93+
.cell.circle::before,
94+
.board.circle .cell:not(.x):not(.circle):hover::before {
95+
width: var(--mark-size);
96+
height: var(--mark-size);
97+
}
98+
99+
.cell.circle::after,
100+
.board.circle .cell:not(.x):not(.circle):hover::after {
101+
width: calc(var(--mark-size) * 0.7);
102+
height: calc(var(--mark-size) * 0.7);
103+
background-color: white;
104+
}
105+
106+
.winning-message {
107+
display: none;
108+
justify-content: center;
109+
align-items: center;
110+
font-size: 3rem;
111+
flex-direction: column;
112+
}
113+
114+
.winning-message button {
115+
font-size: 3rem;
116+
background-color: white;
117+
border: 1px solid blue;
118+
padding: 0.25em 0.5em;
119+
cursor: pointer;
120+
}
121+
122+
.winning-message button:hover {
123+
background-color: blue;
124+
color: white;
125+
border-color: white;
126+
}
127+
128+
.winning-message.show {
129+
display: flex;
130+
}

‎TicTacToeGame/Abhii-07/Index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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+
<script src="Index.js" defer></script>
8+
<link rel="icon" type="image/x-icon" href="/TicTac.png">
9+
<link rel="stylesheet" href="Index.css" />
10+
<title>Tic Tac Toe</title>
11+
</head>
12+
<body>
13+
<div id="loading-screen">
14+
<h3>Play VS</h3>
15+
<button class="load-btn" onclick="setRival('human')">Human</button>
16+
<span> or </span>
17+
<button class="load-btn" onclick="setRival('computer')">Computer</button>
18+
</div>
19+
<div id="game-box">
20+
<div class="board" id="board">
21+
<div class="cell" data-cell></div>
22+
<div class="cell" data-cell></div>
23+
<div class="cell" data-cell></div>
24+
<div class="cell" data-cell></div>
25+
<div class="cell" data-cell></div>
26+
<div class="cell" data-cell></div>
27+
<div class="cell" data-cell></div>
28+
<div class="cell" data-cell></div>
29+
<div class="cell" data-cell></div>
30+
</div>
31+
<button disabled id="undo-btn">Undo</button>
32+
<div class="winning-message" id="wMessage">
33+
<div id="text"></div>
34+
</div>
35+
</div>
36+
</body>
37+
</html>

‎TicTacToeGame/Abhii-07/Index.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
const cellElements = document.querySelectorAll('[data-cell]');
2+
const undoBtn = document.getElementById('undo-btn');
3+
const board = document.getElementById('board');
4+
const wMessageElement = document.getElementById('wMessage');
5+
const wMessageTextElement = document.getElementById('text');
6+
const xClass = 'x';
7+
const circClass = 'circle';
8+
const combo = [
9+
[0, 1, 2],
10+
[3, 4, 5],
11+
[6, 7, 8],
12+
[0, 3, 6],
13+
[1, 4, 7],
14+
[2, 5, 8],
15+
[0, 4, 8],
16+
[2, 4, 6],
17+
];
18+
let circleTurn;
19+
let lastSelectedCell;
20+
let rival;
21+
load();
22+
23+
function load() {
24+
circleTurn = false;
25+
cellElements.forEach((cell) => {
26+
cell.classList.remove(xClass);
27+
cell.classList.remove(circClass);
28+
cell.removeEventListener('click', handleClick);
29+
cell.addEventListener('click', handleClick);
30+
});
31+
setBoardHoverClass();
32+
undoBtn.addEventListener('click', undo);
33+
wMessageElement.classList.remove('show');
34+
}
35+
36+
function undo() {
37+
undoBtn.disabled = true;
38+
swap();
39+
lastSelectedCell.classList.remove('x');
40+
lastSelectedCell.classList.remove('circle');
41+
lastSelectedCell.childNodes.forEach(function (child) {
42+
lastSelectedCell.removeChild(child);
43+
});
44+
}
45+
46+
function handleClick(e, el) {
47+
const cell = e.target || el;
48+
const currentClass = circleTurn ? circClass : xClass;
49+
placeMark(cell, currentClass);
50+
if (checkWin(currentClass)) {
51+
isEnd(false);
52+
return;
53+
} else if (isDraw()) {
54+
isEnd(true);
55+
return;
56+
} else {
57+
swap();
58+
setBoardHoverClass();
59+
}
60+
if (rival === 'computer' && e) {
61+
board.classList.add('disabled');
62+
setTimeout(function () {
63+
computerMove();
64+
}, 500);
65+
}
66+
}
67+
68+
function computerMove() {
69+
let pick = Math.round(Math.random() * 8);
70+
let selectedCell = cellElements[pick];
71+
72+
while (
73+
selectedCell.classList.value.indexOf('x') > -1 ||
74+
selectedCell.classList.value.indexOf('circle') > -1
75+
) {
76+
console.log('yes');
77+
pick = Math.round(Math.random() * 8);
78+
selectedCell = cellElements[pick];
79+
}
80+
board.classList.remove('disabled');
81+
handleClick(false, selectedCell);
82+
83+
}
84+
85+
function setRival(_rival) {
86+
rival = _rival;
87+
document.getElementById('loading-screen').style.display = 'none';
88+
document.getElementById('game-box').style.display = 'block';
89+
if (rival === 'computer') {
90+
undoBtn.style.display = 'none';
91+
}
92+
}
93+
94+
function isEnd(draw) {
95+
if (draw) {
96+
wMessageTextElement.innerText = 'Draw';
97+
} else {
98+
wMessageTextElement.innerText = `Winner is: ${circleTurn ? 'O' : 'X'}`;
99+
}
100+
wMessageElement.classList.add('show');
101+
board.classList.add('game-ended');
102+
undoBtn.disabled = true;
103+
}
104+
105+
function isDraw() {
106+
return [...cellElements].every((cell) => {
107+
return (
108+
cell.classList.contains(xClass) || cell.classList.contains(circClass)
109+
);
110+
});
111+
}
112+
113+
function placeMark(cell, currentClass) {
114+
lastSelectedCell = cell;
115+
undoBtn.disabled = false;
116+
cell.classList.add(currentClass);
117+
}
118+
119+
function swap() {
120+
circleTurn = !circleTurn;
121+
}
122+
123+
function checkWin(currentClass) {
124+
return combo.some((combination) => {
125+
return combination.every((index) => {
126+
return cellElements[index].classList.contains(currentClass);
127+
});
128+
});
129+
}
130+
131+
function setBoardHoverClass() {
132+
board.classList.remove(xClass);
133+
board.classList.remove(circClass);
134+
if (circleTurn) {
135+
board.classList.add(circClass);
136+
} else {
137+
board.classList.add(xClass);
138+
}
139+
}

‎TicTacToeGame/Abhii-07/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
# Tic - Tac - Toe
3+
4+
A simple Tic-Tac-Toe web app made with HTML5, CSS3 and JavaScript.
5+
6+
7+
## Demo
8+
9+
https://relaxed-gingersnap-ff29ef.netlify.app
10+

‎TicTacToeGame/Abhii-07/TicTac.png‎

1.08 KB
Loading

0 commit comments

Comments
 (0)