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

No:35966

148

←

Prev Next

→

Make a tic tac toe game
Developer User16701｜Date and time 24/1/16 5:29:02
Build time 11.929 sec｜Game capacity 2.952KB｜

Script

Tic Tac Toe - Juego del Tres en Raya

←

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 - Juego del Tres en Raya</title>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
    }
    .board {
        display: flex;
        flex-wrap: wrap;
        width: 320px;
        margin: 0 auto;
    }
    .cell {
        width: 100px;
        height: 100px;
        border: 2px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 72px;
    }
    .cell:hover {
        background-color: #f2f2f2;
        cursor: pointer;
    }
    .message {
        margin-top: 20px;
        font-size: 24px;
    }
</style>
</head>
<body>
    <h1>Tic Tac Toe - Juego del Tres en Raya</h1>
    <div class="board">
        <div class="cell" onclick="makeMove(0)"></div>
        <div class="cell" onclick="makeMove(1)"></div>
        <div class="cell" onclick="makeMove(2)"></div>
        <div class="cell" onclick="makeMove(3)"></div>
        <div class="cell" onclick="makeMove(4)"></div>
        <div class="cell" onclick="makeMove(5)"></div>
        <div class="cell" onclick="makeMove(6)"></div>
        <div class="cell" onclick="makeMove(7)"></div>
        <div class="cell" onclick="makeMove(8)"></div>
    </div>
    <div class="message"></div>
    
    <script>
        let currentPlayer = 'X';
        let board = ['', '', '', '', '', '', '', '', ''];
        let gameFinished = false;
        
        const winningCombinations = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6]
        ];
        
        function makeMove(index) {
            if (!gameFinished && board[index] === '') {
                board[index] = currentPlayer;
                document.getElementsByClassName('cell')[index].innerText = currentPlayer;
                
                const winner = checkWinner();
                if (winner) {
                    document.getElementsByClassName('message')[0].innerText = `¡${winner} gana el juego!`;
                    gameFinished = true;
                } else if (board.indexOf('') === -1) {
                    document.getElementsByClassName('message')[0].innerText = '¡Empate!';
                    gameFinished = true;
                } else {
                    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                }
            }
        }
        
        function checkWinner() {
            for (let combination of winningCombinations) {
                if (
                    board[combination[0]] !== '' &&
                    board[combination[0]] === board[combination[1]] &&
                    board[combination[0]] === board[combination[2]]
                ) {
                    return board[combination[0]];
                }
            }
            return null;
        }
    </script>
</body>
</html>