a simple tic-tac-toe game's game

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

No:44505

←

Prev Next

→

a simple tic-tac-toe game
Developer User19403｜Date and time 24/2/18 6:18:00
Build time 8.639 sec｜Game capacity 2.252KB｜

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>
</head>
<body>
    <div id="gameBoard">
        <div class="cell" onclick="playerMove(0)"></div>
        <div class="cell" onclick="playerMove(1)"></div>
        <div class="cell" onclick="playerMove(2)"></div>
        <div class="cell" onclick="playerMove(3)"></div>
        <div class="cell" onclick="playerMove(4)"></div>
        <div class="cell" onclick="playerMove(5)"></div>
        <div class="cell" onclick="playerMove(6)"></div>
        <div class="cell" onclick="playerMove(7)"></div>
        <div class="cell" onclick="playerMove(8)"></div>
    </div>

function playerMove(position) {
            if (board[position] === "" && !gameover) {
                board[position] = currentPlayer;
                document.getElementsByClassName("cell")[position].innerHTML = currentPlayer;
                checkWinner();
                currentPlayer = currentPlayer === "X" ? "O" : "X";
            }
        }

function checkWinner() {
            const 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 (let combo of winningCombos) {
                let [a, b, c] = combo;
                if (board[a] && board[a] === board[b] && board[a] === board[c]) {
                    gameover = true;
                    alert(`${currentPlayer} venceu!`);
                    return;
                }
            }

if (!board.includes("")) {
                gameover = true;
                alert("Empate!");
            }
        }
    </script>

.cell {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
        }
    </style>
</body>
</html>