Tic Tac Toe
It is quite easy to develop with some simple validations and error checks. Player-1 starts playing the game and both the players make their moves in consecutive turns. The player who makes a straight 3-block chain wins the game. This game is built on the front-end using simple logic and validation checks only.
- Prerequisite: Basic knowledge of some front-end technologies like HTML, CSS, JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/04158e9780.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="game">
<div class="row"><div class="box"></div><div class="box"></div><div class="box"></div></div>
<div class="row"><div class="box"></div><div class="box"></div><div class="box"></div></div>
<div class="row"><div class="box"></div><div class="box"></div><div class="box"></div></div>
</div>
</div>
<div class="popup">
<div class="nav">
<i class="fa-regular fa-circle-xmark cross"></i>
</div>
<img src="https://www.pngkey.com/png/full/22-225631_trophy-png-transparent-free-images-transparent-background-trophy.png" alt="">
<div class="title">Congratulation!</div>
<div class="winner">Won</div>
</div>
<div class="gamemode">
<div class="title">Multiplayer</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
body{
background-color:#150050;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
.container .game .box{
min-height:150px;
border-radius:12px;
min-width:150px;
background-color:#3F0071;
margin:2%;
display: flex;
justify-content: center;
align-items: center;
font-size:5rem;
color:white;
font-family:Poppins;
cursor: pointer;
}
.container .game .box:first-child{
margin-left:0%;
}
.container .game .row{
display:flex;
}
.popup{
height:400px;
width:800px;
position:absolute;
top:25%;
left:25%;
background-color:white;
display: flex;
flex-direction:column;
align-items: center;
border-radius:12px;
transform:scale(0);
}
.popup .nav{
height:50px;
width:100%;
display: flex;
align-items:center;
}
.popup .nav i{
margin-left:95%;
font-size:2rem;
cursor: pointer;
}
.popup .nav i:hover{
color:#FB2576;
transition-duration:0.3s;
}
.popup img{
width:25%;
}
.popup .title{
font-family:Poppins;
font-size:2rem;
}
.popup .winner{
font-family:Poppins;
font-size:3rem;
color:#FB2576;
}
.gamemode .title{
height:45px;
width:200px;
background-color:#FB2576;
position:absolute;
top:10%;
display: flex;
justify-content: center;
align-items: center;
color:white;
font-family:gilroy;
left:80%;
}
Javascript
let boxes = document.querySelectorAll('.box');
let popup = document.querySelector('.popup');
let winner = document.querySelector('.winner');
let cross = document.querySelector('.cross');
cross.addEventListener('click',()=>{
location.reload();
})
let turn = "O";
function changeturn() {
if (turn == "O") {
turn = "X";
} else {
turn = "O";
}
return turn;
}
let probab = ['0,1,2', '3,4,5', '6,7,8', '0,4,8', '2,4,6', '0,3,6', '1,4,7', '2,5,8'];
let clickedindex = 0;
boxes.forEach((element, index) => {
element.addEventListener('click', () => {
element.innerHTML = changeturn();
clickedindex++;
probab.forEach(element => {
let newarray = [];
newarray = element.split(',');
if (boxes[newarray[0]].innerHTML != "" && boxes[newarray[1]].innerHTML != "" && boxes[newarray[2]].innerHTML != "") {
if (boxes[newarray[0]].innerHTML == boxes[newarray[1]].innerHTML && boxes[newarray[0]].innerHTML == boxes[newarray[2]].innerHTML) {
popup.style.transform = `scale(1)`;
popup.style.transitionDuration =`0.3s`;
winner.innerHTML = turn + ` Won`;
}else if(clickedindex==9 && popup.style.transform!=`scale(1)`){
popup.style.transform = `scale(1)`;
popup.style.transitionDuration =`0.3s`;
winner.innerHTML = `Draw`;
}
}
})
if (element.innerHTML == "X") {
element.style.backgroundColor = "#FB2576";
element.style.color = "white";
}
}, { once: true });
})