Tic-Tac-Toe Game For Beginner Using [HTML/CSS/JS]
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">
<main>
<div class="hide msgcontainer">
<p class="msg">WINNER</p>
<button class="newbtn">NEW MATCH</button>
</div>
<H1>Tic Tac Toe</H1>
<div class="container">
<div class="game">
<button class="boxes"></button>
<button class="boxes"></button>
<button class="boxes"></button>
<button class="boxes"></button>
<button class="boxes"></button>
<button class="boxes"></button>
<button class="boxes"></button>
<button class="boxes"></button>
<button class="boxes"></button>
</div>
</div>
<BUTTON class="reset">RESET</BUTTON>
</main>
<script src="script.js"></script>
</body>
</html>
CSS code:
*{
margin:0px;
padding:0px;
}
body{
background-color: aquamarine;
text-align: center;
}
.container{
height:60vh;
display:flex;
justify-content: center;
}
.game{
height:60vmin;
width:60vmin;
display:flex;
align-items: center;
justify-content: center;
flex-wrap:wrap;
}
.boxes{
height:20vmin;
width:19vmin;
border-radius: 5px;
border-color: aqua;
font-size: 50PX;
background-color: antiquewhite;
color:black;
}
.reset{
width:90px;
height:40px;
border-radius:20px;
background-color: rgb(225, 251, 55);
border: 2px solid black;
margin-top:20px;
}
.newbtn{
width:90px;
height:40px;
border-radius:20px;
background-color: rgb(225, 251, 55);
border: 2px solid black;
}
.msg{
font-size: 40px;
margin:10px;
}
.msgcontainer{
height:20vmin
}
.hide{
display:none;
}
JAVASCRIPT Code:
let boxes = document.querySelectorAll(".boxes")
let resetbtn = document.querySelector(".reset")
let newbtn = document.querySelector(".newbtn")
let msgcontainer = document.querySelector(".msgcontainer")
let msg = document.querySelector(".msg")
let turnO = true
let count = 0
const winpattern = [
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 4, 6],
[2, 5, 8],
[3, 4, 5],
[6, 7, 8]
]
const resetgame = () => {
turnO = true
enableboxes()
msgcontainer.classList.add("hide")
count = 0
}
boxes.forEach((box) => {
box.addEventListener("click", () => {
console.log("box clicked")
if (turnO) {
box.innerText = "O"
turnO = false
}
else {
box.innerText = "X"
turnO = true
}
box.disabled = true
count++;
console.log(count)
let iswinner = winner()
if (count === 9 && !iswinner) {
console.log("draw")
gamedraw()
}
})
})
const gamedraw = () => {
msg.innerText = `Game Draw,Play Again`
msgcontainer.classList.remove("hide")
disableboxes()
}
const disableboxes = () => {
for (const box of boxes) {
box.disabled = true
}
}
const enableboxes = () => {
for (const box of boxes) {
box.disabled = false
box.innerText = "";
}
}
let showwin = (winner) => {
msg.innerText = `Congratulations, Winner is ${winner}`;
msgcontainer.classList.remove("hide");
disableboxes()
}
const winner = () => {
for (let pattern of winpattern) {
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) {
console.log("winner", pos1val)
showwin(pos1val)
return true
}
}
}
}
newbtn.addEventListener("click", resetgame)
resetbtn.addEventListener("click", resetgame)
PREVIEW
