Tic Tac Toe Game Using Simple JS Logic

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

Tic Tac Toe Game Using Simple JS Logic

Tic Tac Toe

HTML

CSS

Javascript

Subscribe to my newsletter

Dipesh Murmu

Dipesh Murmu