Scribd
Upload
275 views5 pages

Tic Tac Toe PDF

This document contains the HTML, CSS, and JavaScript code for a Tic-Tac-Toe game. The HTML defines the layout and components of the game board. The CSS styles the components and sets design properties. The JavaScript contains the logic to handle player turns, check for a winner, and reset the game.

Uploaded by

mahakmahak49793
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
275 views5 pages

Tic Tac Toe PDF

This document contains the HTML, CSS, and JavaScript code for a Tic-Tac-Toe game. The HTML defines the layout and components of the game board. The CSS styles the components and sets design properties. The JavaScript contains the logic to handle player turns, check for a winner, and reset the game.

Uploaded by

mahakmahak49793
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

TIC-TAC-TOE

HTML CODE

<!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</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>Tic-Tac-Toe</h1>
<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>

CSS CODE

* {
margin: 0;
padding: 0;
}

body {
background-color: #548687;
text-align: center;
}

.container {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}

.game {
height: 60vmin;
/*60% of viewport smaller dimension */
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 1 rem rgba(0, 0, 0, 0.3);
font-size: 8vmin;
color: #b0413e;
background-color: #ffffc7;
}

#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;
}

.symbol-O {
color: black;
}

.symbol-X {
color: blue;
}

JAVASCRIPT CODE

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;
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;
enableBoxes();
msgContainer.classList.add("hide");
}

boxes.forEach((box) => {
box.addEventListener("click", () => {
if (turnO) {
box.innerText = "O";
box.classList.add("symbol-O");
turnO = false;
} else {
box.innerText = "X";
box.classList.add("symbol-X");
turnO = true;
}
box.disabled = true;
checkWinner();
});
});

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);
}
}
}
};

newGameBtn.addEventListener("click", resetGame);
resetbtn.addEventListener("click", resetGame);

You might also like