Tic TAC toe with Nine squares making a square,with cake color background,with achievements 🏆's game

Click here for free DL of the app version that can save data.

No:50959

←

Prev Next

→

Tic TAC toe with Nine squares making a square,with..ALL
Developer User21444｜Date and time 24/3/10 11:02:08
Build time 5.756 sec｜Game capacity 1.888KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
    body {
        background-color: #FADBD8; /* cake color background */
    }
</style>
</head>
<body>
<div id="gameBoard">
    <div class="square" id="0"></div>
    <div class="square" id="1"></div>
    <div class="square" id="2"></div>
    <div class="square" id="3"></div>
    <div class="square" id="4"></div>
    <div class="square" id="5"></div>
    <div class="square" id="6"></div>
    <div class="square" id="7"></div>
    <div class="square" id="8"></div>
</div>

gameBoard.addEventListener('click', function(e) {
        if (e.target.classList.contains('square') && !e.target.innerHTML) {
            e.target.innerHTML = currentPlayer;
            
            if (checkWin()) {
                alert('Player ' + currentPlayer + ' wins!');
                resetBoard();
            } else {
                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            }
        }
    });

function checkWin() {
        var squares = document.getElementsByClassName('square');
        var winningCombos = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]];

for (var i = 0; i < winningCombos.length; i++) {
            var combo = winningCombos[i];
            if (squares[combo[0]].innerHTML && squares[combo[0]].innerHTML === squares[combo[1]].innerHTML && squares[combo[0]].innerHTML === squares[combo[2]].innerHTML) {
                return true;
            }
        }

return false;
    }

function resetBoard() {
        var squares = document.getElementsByClassName('square');
        for (var i = 0; i < squares.length; i++) {
            squares[i].innerHTML = '';
        }
        currentPlayer = 'X';
    }
</script>
</body>
</html>