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

No:33386

Create an online tic tak to game
Developer User15755｜Date and time 24/1/4 0:42:00
Build time 31.225 sec｜Game capacity 3.838KB｜

Script

Tic Tac Toe

←

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>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Arial', sans-serif;
            background-color: #F3F3F3;
        }
        
        h1 {
            text-align: center;
        }
        
        .board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            background-color: #FFF;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 48px;
            width: 100px;
            height: 100px;
            border: 1px solid #CCC;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .cell:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
        
        .reset {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Tic Tac Toe</h1>
    <div 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 class="reset">
        <button onclick="reset()">Reset</button>
    </div>
    
    <script>
        let currentPlayer = "X";
        const cells = document.querySelectorAll(".cell");
        
        cells.forEach(cell => cell.addEventListener("click", handleClick));
        
        function handleClick() {
            if (!this.textContent) {
                this.textContent = currentPlayer;
                this.classList.add(currentPlayer);
                if (checkWin(currentPlayer)) {
                    endGame(currentPlayer);
                } else if (checkDraw()) {
                    endGame("draw");
                } else {
                    currentPlayer = currentPlayer === "X" ? "O" : "X";
                }
            }
        }
        
        function checkWin(player) {
            const winCombinations = [
                [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
                [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
                [0, 4, 8], [2, 4, 6] // Diagonals
            ];
            return winCombinations.some(combination => {
                return combination.every(index => {
                    return cells[index].textContent === player;
                });
            });
        }
        
        function checkDraw() {
            return Array.from(cells).every(cell => {
                return cell.textContent !== "";
            });
        }
        
        function endGame(result) {
            cells.forEach(cell => cell.removeEventListener("click", handleClick));
            if (result === "draw") {
                alert("It's a draw!");
            } else {
                alert(`Player ${result} wins!`);
            }
        }
        
        function reset() {
            cells.forEach(cell => {
                cell.textContent = "";
                cell.classList.remove("X", "O");
            });
            currentPlayer = "X";
            cells.forEach(cell => cell.addEventListener("click", handleClick));
        }
    </script>
</body>
</html>