Tic Tac Toe Game Using Simple JS Logic

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

Did you find this article valuable?

Support Dipesh Murmu by becoming a sponsor. Any amount is appreciated!