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

No:42152

<!DOCTYPE html> <html lang="en"> <h..ALL
Developer User18810｜Date and time 24/2/10 20:16:31
Build time 9.418 sec｜Game capacity 3.293KB｜

Script

Sure! Here's a single HTML file containing a Tic Tac Toe game implemented using JavaScript and enclosed in script tags:

Tic Tac Toe

This HTML file creates a Tic Tac Toe game with a 3x3 grid. Upon clicking on a cell, the corresponding player's symbol ('X' or 'O') is displayed in the cell. The game ends when a player has three symbols in a row, column, or diagonal. If a player wins, an alert message is displayed. You can customize the game's appearance by modifying the CSS styles in the `<style>` tag.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's a single HTML file containing a Tic Tac Toe game implemented using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .container {
            text-align: center;
        }
        .board {
            display: inline-grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            margin-top: 20px;
        }
        .cell {
            width: 100px;
            height: 100px;
            background-color: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Tic Tac Toe</h1>
        <div id="board" class="board">
            <div class="cell" id="cell-0"></div>
            <div class="cell" id="cell-1"></div>
            <div class="cell" id="cell-2"></div>
            <div class="cell" id="cell-3"></div>
            <div class="cell" id="cell-4"></div>
            <div class="cell" id="cell-5"></div>
            <div class="cell" id="cell-6"></div>
            <div class="cell" id="cell-7"></div>
            <div class="cell" id="cell-8"></div>
        </div>
    </div>

cells.forEach(cell => {
            cell.addEventListener('click', () => {
                if (!gameEnd && cell.textContent === '') {
                    cell.textContent = currentPlayer;
                    cell.style.color = currentPlayer === 'X' ? 'red' : 'blue';

if (checkWin(currentPlayer)) {
                        alert(`${currentPlayer} wins!`);
                        gameEnd = true;
                    }
                    
                    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                }
            });
        });

function checkWin(player) {
            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]
            ];

for (let condition of winningConditions) {
                const [a, b, c] = condition;
                if (
                    cells[a].textContent === player &&
                    cells[b].textContent === player &&
                    cells[c].textContent === player
                ) {
                    return true;
                }
            }

return false;
        }
    </script>
</body>
</html>
```

You can customize the game's appearance by modifying the CSS styles in the `<style>` tag.