index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tic-Tac-Toe Game</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="msg-container hide"> <p id="msg">Winner</p> <button id="new-btn">New Game</button> </div> <main> <h1>Game</h1> <h2>Created By - programmercoding.com </h2> <div class="container"> <div class="game"> <button class="box"></button> <button class="box"></button> <button class="box"></button> <button class="box"></button> <button class="box"></button> <button class="box"></button> <button class="box"></button> <button class="box"></button> <button class="box"></button> </div> </div> <button id="reset-btn">Reset Game</button> </main> <script src="app.js"></script> </body> </html>
Style.css
* {
margin: 0;
padding: 0;
}
body {
background-color: #7f9a39;
text-align: center;
}
.container {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
h2 {
color: white;
}
.game {
height: 60vmin;
width: 60vmin;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5vmin;
}
.box {
height: 18vmin;
width: 18vmin;
border-radius: 1rem;
border: none;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
font-size: 8vmin;
color: #f90707a7;
background-color: #0bbde5;
}
#reset-btn {
padding: 1rem;
font-size: 1.25rem;
background-color: #191913;
color: #fff;
border-radius: 1rem;
border: none;
}
#new-btn {
padding: 1rem;
font-size: 1.25rem;
background-color: #191913;
color: #fff;
border-radius: 1rem;
border: none;
}
#msg {
color: #ffffc7;
font-size: 5vmin;
}
.msg-container {
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 4rem;
}
.hide {
display: none;
}
app.js
let boxes = document.querySelectorAll(".box"); let resetBtn = document.querySelector("#reset-btn"); let newGameBtn = document.querySelector("#new-btn"); let msgContainer = document.querySelector(".msg-container"); let msg = document.querySelector("#msg"); let turnO = true; //playerX, playerO let count = 0; //To Track Draw 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], ]; const resetGame = () => { turnO = true; count = 0; enableBoxes(); msgContainer.classList.add("hide"); }; boxes.forEach((box) => { box.addEventListener("click", () => { if (turnO) { //playerO box.innerText = "O"; turnO = false; } else { //playerX box.innerText = "X"; turnO = true; } box.disabled = true; count++; let isWinner = checkWinner(); if (count === 9 && !isWinner) { gameDraw(); } }); }); const gameDraw = () => { msg.innerText = `Game was a Draw.`; msgContainer.classList.remove("hide"); disableBoxes(); }; const disableBoxes = () => { for (let box of boxes) { box.disabled = true; } }; const enableBoxes = () => { for (let box of boxes) { box.disabled = false; box.innerText = ""; } }; const showWinner = (winner) => { msg.innerText = `Congratulations, Winner is ${winner}`; msgContainer.classList.remove("hide"); disableBoxes(); }; const checkWinner = () => { for (let pattern of winPatterns) { let pos1Val = boxes[pattern[0]].innerText; let pos2Val = boxes[pattern[1]].innerText; let pos3Val = boxes[pattern[2]].innerText; if (pos1Val != "" && pos2Val != "" && pos3Val != "") { if (pos1Val === pos2Val && pos2Val === pos3Val) { showWinner(pos1Val); return true; } } } }; newGameBtn.addEventListener("click", resetGame); resetBtn.addEventListener("click", resetGame);
Output is:
