<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: lightcyan;
text-align: center;
}
.c {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
.g {
height: 60vmin;
width: 60vmin;
display: flex;
flex-wrap: wrap;
gap: 1.5vmin;
justify-content: center;
}
.b {
height: 18vmin;
width: 18vmin;
border-radius: 1rem;
border: none;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
font-size: 8vmin;
color: red;
background-color: yellow;
}
#r {
padding: 1rem;
font-size: 1.25rem;
background: #191913;
color: white;
border-radius: 1rem;
border: none;
}
.b:hover {
background-color: chocolate;
}
#n {
padding: 1rem;
font-size: 1.25rem;
background: #191913;
color: white;
border-radius: 1rem;
border: none;
}
#m {
font-size: 8vmin;
}
.m-c {
height: 30vmin;
}
.h {
display: none;
}
</style>
</head>
<body>
<div class="m-c h">
<p id="m">Winner</p>
<button id="n">New Game</button>
</div>
<main>
<h1>Tic Tac Toe</h1>
<div class="c">
<div class="g">
<button class="b"></button>
<button class="b"></button>
<button class="b"></button>
<button class="b"></button>
<button class="b"></button>
<button class="b"></button>
<button class="b"></button>
<button class="b"></button>
<button class="b"></button>
</div>
</div>
<button id="r">Reset Game</button>
</main>
<script defer>
const cells = document.querySelectorAll('.b');
const resetButton = document.querySelector('#r');
const newGameButton = document.querySelector('#n');
const messageContainer = document.querySelector('.m-c');
const message = document.querySelector('#m');
let isPlayerO = true;
const winPatterns = [
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 5, 8],
[2, 4, 6],
[3, 4, 5],
[6, 7, 8]
];
cells.forEach((cell) => {
cell.addEventListener('click', function () {
if (isPlayerO) {
cell.innerText = 'O';
cell.style.color = 'green';
isPlayerO = false;
cell.disabled = true;
checkForWinner();
} else {
cell.innerText = 'X';
cell.style.color = 'black';
isPlayerO = true;
cell.disabled = true;
checkForWinner();
}
});
});
const enableCells = () => {
cells.forEach((cell) => {
cell.disabled = false;
cell.innerText = "";
});
};
const disableCells = () => {
cells.forEach((cell) => {
cell.disabled = true;
});
};
const displayWinner = (winner) => {
message.innerText = `Congratulations, Winner is ${winner}`;
messageContainer.classList.remove('h');
disableCells();
};
const checkForWinner = () => {
let winnerFound = false;
winPatterns.forEach((pattern) => {
let pos1Value = cells[pattern[0]].innerText;
let pos2Value = cells[pattern[1]].innerText;
let pos3Value = cells[pattern[2]].innerText;
if (pos1Value !== "" && pos2Value !== "" && pos3Value !== ""
&& pos1Value === pos2Value && pos2Value === pos3Value) {
displayWinner(pos1Value);
winnerFound = true;
return;
}
});
if (!winnerFound) {
const allCellsFilled = Array.prototype.slice.call(cells).
every((cell) => cell.innerText !== "");
if (allCellsFilled) {
messageContainer.classList.remove('h');
message.innerText = 'Match Drawn';
}
}
};
const resetGame = () => {
isPlayerO = true;
enableCells();
messageContainer.classList.add('h');
};
newGameButton.addEventListener('click', resetGame);
resetButton.addEventListener('click', resetGame);
</script>
</body>
</html>