caner demirci
Caner DEMİRCİ Kişisel Blog

Caner DEMİRCİ Kişisel Blog

Tic Tac Toe Game With HTML and JS

Tic Tac Toe Game With HTML and JS

caner demirci's photo
caner demirci
·Oct 30, 2021·

3 min read

unknown_2021.10.30-15.12_1.gif

<!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>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            background-color: #14bdac;
            width: 100%;
            height: 100%;
            padding: 1.5rem;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: .5rem;
            width: 80%;
            height: 100%;
            margin: auto;
            background-color: #70757a;
        }
            .grid > div {
                background-color: #3fecdb;
                cursor: pointer;
                font-size: 3rem;
                font-weight: bold;
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
                transition: all .5s;
            }
            .grid > div:hover {
                opacity: .6;
            }
            .grid > div > div {
                text-align: center;
            }
    </style>
</head>
<body>
    <div id="grid" class="grid">
    </div>

    <script>
        const grid = document.getElementById('grid');

        var won = false;
        var freezeGame = false;
        var squaresHTML = '';
        var sqId = 0;
        var moveX = true;

        const squares = [];

        for (let r=0; r<3; r++) {
            for (let c=0; c<3; c++) {
                sqId++;
                squaresHTML += `<div id="${sqId}"><div></div></div>`;
                squares.push({ id: sqId, move: null });
            }
        }

        grid.innerHTML = squaresHTML;

        const squaresEL = document.querySelectorAll('#grid > div');

        squaresEL.forEach(s => s.addEventListener(
            'click',
            () => {                
                if (!freezeGame) {
                    square = squares.find(sq => sq.id == s.id);

                    if (!square.move) {
                        moveX = !moveX;
                        square.move = moveX ? 'X' : 'O';
                        s.querySelector('div').innerText = moveX ? 'X' : 'O';
                        s.style.backgroundColor = moveX ? 'royalblue' : 'tomato';

                        checkGame();
                    }
                }
            }
        ));

        function wonGame(one, two, three, character) {
            freezeGame = true;
            won = true;
            let anim = true;

            if (one == null && two == null && three == null && character == null) {
                gameOverAnimation(anim, function() {
                    squaresEL.forEach(s => s.style.backgroundColor = anim ? 'green' : 'yellow');
                    anim = !anim;
                }, function() {
                    alert('DRAW!');
                    location.reload();
                });
                return;
            }

            gameOverAnimation(anim, function() {
                squaresEL[one].style.backgroundColor = anim ? 'green' : 'yellow';
                squaresEL[two].style.backgroundColor = anim ? 'green' : 'yellow';
                squaresEL[three].style.backgroundColor = anim ? 'green' : 'yellow';
                anim = !anim;
            },function() {
                alert(`${character} won`);
                    location.reload();
                });
        }

        function gameOverAnimation(anim, animCallback, overCallback) {
            setInterval(function() {
                animCallback();
            }, 200);
            setTimeout(function() {
                overCallback();
            }, 2000);
        }

        function checkGame() {
            // Rows
            // first row
            if (squares[0].move == 'X' && squares[1].move == 'X' && squares[2].move == 'X') {
                wonGame(0, 1, 2, 'X');
            } else if (squares[0].move == 'O' && squares[1].move == 'O' && squares[2].move == 'O') {
                wonGame(0, 1, 2, 'O');
            }
            // second row
            if (squares[3].move == 'X' && squares[4].move == 'X' && squares[5].move == 'X') {
                wonGame(3, 4, 5, 'X');
            } else if (squares[3].move == 'O' && squares[4].move == 'O' && squares[5].move == 'O') {
                wonGame(3, 4, 5, 'O');
            }
            // third row
            if (squares[6].move == 'X' && squares[7].move == 'X' && squares[8].move == 'X') {
                wonGame(6, 7, 8, 'X');
            } else if (squares[6].move == 'O' && squares[7].move == 'O' && squares[8].move == 'O') {
                wonGame(6, 7, 8, 'O');
            }

            // first column
            if (squares[0].move == 'X' && squares[3].move == 'X' && squares[6].move == 'X') {
                wonGame(0, 3, 6, 'X');
            } else if (squares[0].move == 'O' && squares[3].move == 'O' && squares[6].move == 'O') {
                wonGame(0, 3, 6, 'O');
            }
            // second column
            if (squares[1].move == 'X' && squares[4].move == 'X' && squares[7].move == 'X') {
                wonGame(1, 4, 7, 'X');
            } else if (squares[1].move == 'O' && squares[4].move == 'O' && squares[7].move == 'O') {
                wonGame(1, 4, 7, 'O');
            }
            // third column
            if (squares[2].move == 'X' && squares[5].move == 'X' && squares[8].move == 'X') {
                wonGame(2, 5, 8, 'X');
            } else if (squares[2].move == 'O' && squares[5].move == 'O' && squares[8].move == 'O') {
                wonGame(2, 5, 8, 'O');
            }

            // left cross
            if (squares[0].move == 'X' && squares[4].move == 'X' && squares[8].move == 'X') {
                wonGame(0, 4, 8, 'X');
            } else if (squares[0].move == 'O' && squares[4].move == 'O' && squares[8].move == 'O') {
                wonGame(0, 4, 8, 'O');
            }
            // right cross
            if (squares[2].move == 'X' && squares[4].move == 'X' && squares[6].move == 'X') {
                wonGame(2, 4, 6, 'X');
            } else if (squares[2].move == 'O' && squares[4].move == 'O' && squares[6].move == 'O') {
                wonGame(2, 4, 6, 'X');
            }

            const nullSquaresNum = squares.filter(s => s.move == null);

            if (nullSquaresNum.length == 0 && !won) {
                wonGame(null, null, null, null);
            }
        }
    </script>
</body>
</html>
 
Share this