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

No:50958

Tic TAC toe with Nine squares making a square,with..ALL
Developer User21444｜Date and time 24/3/10 11:01:22
Build time 10.152 sec｜Game capacity 2.844KB｜

Script

Tic Tac Toe Game

←

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 Game</title>
    <style>
        body {
            background-color: #ffcccb; /* Cake color background */
            font-family: Arial, sans-serif;
        }
        .square {
            width: 100px;
            height: 100px;
            border: 2px solid #fff;
            display: inline-block;
            text-align: center;
            line-height: 100px;
            font-size: 36px;
            color: #fff;
            background-color: #ff8c00; /* Cake color background */
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Tic Tac Toe Game</h1>
    <div id="gameboard">
        <div class="square" onclick="playMove(1)"></div>
        <div class="square" onclick="playMove(2)"></div>
        <div class="square" onclick="playMove(3)"></div>
        <div class="square" onclick="playMove(4)"></div>
        <div class="square" onclick="playMove(5)"></div>
        <div class="square" onclick="playMove(6)"></div>
        <div class="square" onclick="playMove(7)"></div>
        <div class="square" onclick="playMove(8)"></div>
        <div class="square" onclick="playMove(9)"></div>
    </div>

const playMove = (index) => {
            if (!gameboard[index - 1]) {
                gameboard[index - 1] = currentPlayer;
                document.getElementsByClassName('square')[index - 1].innerText = currentPlayer;

if (checkWin()) {
                    document.getElementById('message').innerText = `Player ${currentPlayer} wins!`;
                    document.getElementById('gameboard').style.pointerEvents = 'none';
                } else if (checkDraw()) {
                    document.getElementById('message').innerText = 'It\'s a draw!';
                    document.getElementById('gameboard').style.pointerEvents = 'none';
                } else {
                    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                }
            }
        };

const checkWin = () => {
            for (let i = 0; i < winningCombinations.length; i++) {
                const [a, b, c] = winningCombinations[i];
                if (gameboard[a] && gameboard[a] === gameboard[b] && gameboard[a] === gameboard[c]) return true;
            }
            return false;
        };

const checkDraw = () => {
            return gameboard.every(square => square !== '');
        };
    </script>
</body>
</html>