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

No:44792

←

Prev Next

→

Tic-tac-toe Boss
Developer User19470｜Date and time 24/2/19 5:47:04
Build time 8.144 sec｜Game capacity 2.986KB｜

Script

Tic-tac-toe Boss

←

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 Boss</title>
</head>
<body>
    <h1>Tic-tac-toe Boss</h1>
    
    <div id="gameBoard">
        <div class="cell" onclick="playerTurn(0)"></div>
        <div class="cell" onclick="playerTurn(1)"></div>
        <div class="cell" onclick="playerTurn(2)"></div>
        <div class="cell" onclick="playerTurn(3)"></div>
        <div class="cell" onclick="playerTurn(4)"></div>
        <div class="cell" onclick="playerTurn(5)"></div>
        <div class="cell" onclick="playerTurn(6)"></div>
        <div class="cell" onclick="playerTurn(7)"></div>
        <div class="cell" onclick="playerTurn(8)"></div>
    </div>

<p id="turnMessage"></p>
    
    <script>
        let currentPlayer = 'X';
        let gameBoard = ['', '', '', '', '', '', '', '', ''];
        let gameActive = true;

const winningConditions = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6]
        ];

const playerTurn = (cellIndex) => {
            if (gameBoard[cellIndex] === '' && gameActive) {
                gameBoard[cellIndex] = currentPlayer;
                document.getElementsByClassName('cell')[cellIndex].textContent = currentPlayer;

document.getElementById('turnMessage').textContent = `${currentPlayer}'s turn`;
    </script>

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