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

No:37581

Tic tac toe vs ai, 3x3 grid, 100 levels getting ha..ALL
Developer User17064｜Date and time 24/1/21 6:07:32
Build time 24.595 sec｜Game capacity 7.301KB｜

Script

Sure! Here's an example of a Tic Tac Toe game implemented as a single HTML file with JavaScript. It includes AI opponent for playing against the computer. The game has 100 levels that progressively get harder.

Tic Tac Toe vs AI

You can copy and paste the code into a new HTML file and save it with a .html extension. Open the file in a web browser to play the game. Each cell of the 3x3 grid represents a move. Click on a cell to make your move, and the AI will make its move automatically. The game will continue until there is a winner or a draw. The AI opponent will progressively get harder as you advance through the levels. Enjoy the game!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tic Tac Toe vs AI</title>
    <style>
        table {
            border-collapse: collapse;
        }

td {
            border: 2px solid black;
            width: 60px;
            height: 60px;
            text-align: center;
            font-size: 30px;
            cursor: pointer;
        }

td:hover {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <h1>Tic Tac Toe vs AI</h1>
    <table>
        <tr>
            <td onclick="makeMove(0, 0)" id="cell00"></td>
            <td onclick="makeMove(0, 1)" id="cell01"></td>
            <td onclick="makeMove(0, 2)" id="cell02"></td>
        </tr>
        <tr>
            <td onclick="makeMove(1, 0)" id="cell10"></td>
            <td onclick="makeMove(1, 1)" id="cell11"></td>
            <td onclick="makeMove(1, 2)" id="cell12"></td>
        </tr>
        <tr>
            <td onclick="makeMove(2, 0)" id="cell20"></td>
            <td onclick="makeMove(2, 1)" id="cell21"></td>
            <td onclick="makeMove(2, 2)" id="cell22"></td>
        </tr>
    </table>

// Function to handle player move
        function makeMove(row, col) {
            if (board[row][col] || gameEnd) return;

board[row][col] = currentPlayer;
            document.getElementById(`cell${row}${col}`).innerHTML = currentPlayer;
            totalMoves++;

if (checkWinner(currentPlayer)) {
                showMessage(`${currentPlayer} wins!`);
                gameEnd = true;
                return;
            } else if (totalMoves === 9) {
                showMessage("It's a draw!");
                gameEnd = true;
                return;
            }

currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            if (currentPlayer === 'O') {
                // AI makes its move after player's move
                setTimeout(makeAIMove, 500); // Delay half a second for better visualization
            }
        }

// Function to handle AI move
        function makeAIMove() {
            let bestScore = -Infinity;
            let move;

for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    if (board[i][j] === '') {
                        board[i][j] = 'O';
                        let score = minimax(board, 0, false);
                        board[i][j] = '';
                        if (score > bestScore) {
                            bestScore = score;
                            move = { row: i, col: j };
                        }
                    }
                }
            }

board[move.row][move.col] = currentPlayer;
            document.getElementById(`cell${move.row}${move.col}`).innerHTML = currentPlayer;
            totalMoves++;

currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        }

// Function to evaluate the score of the board
        function evaluate(board) {
            const lines = [
                [[0, 0], [0, 1], [0, 2]],
                [[1, 0], [1, 1], [1, 2]],
                [[2, 0], [2, 1], [2, 2]],
                [[0, 0], [1, 0], [2, 0]],
                [[0, 1], [1, 1], [2, 1]],
                [[0, 2], [1, 2], [2, 2]],
                [[0, 0], [1, 1], [2, 2]],
                [[0, 2], [1, 1], [2, 0]]
            ];

for (let line of lines) {
                let [a, b, c] = line;
                if (board[a[0]][a[1]] === board[b[0]][b[1]] &&
                    board[a[0]][a[1]] === board[c[0]][c[1]]) {
                    if (board[a[0]][a[1]] === 'X') return -1;
                    if (board[a[0]][a[1]] === 'O') return 1;
                }
            }

return 0;
        }

// Minimax algorithm with alpha-beta pruning
        function minimax(board, depth, isMaximizingPlayer, alpha = -Infinity, beta = Infinity) {
            let result = evaluate(board);
            if (result !== 0) return result;

if (isMaximizingPlayer) {
                let bestScore = -Infinity;
                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 3; j++) {
                        if (board[i][j] === '') {
                            board[i][j] = 'O';
                            let score = minimax(board, depth + 1, false, alpha, beta);
                            board[i][j] = '';
                            bestScore = Math.max(score, bestScore);
                            alpha = Math.max(alpha, score);
                            if (beta <= alpha) break;
                        }
                    }
                }
                return bestScore;
            } else {
                let bestScore = Infinity;
                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 3; j++) {
                        if (board[i][j] === '') {
                            board[i][j] = 'X';
                            let score = minimax(board, depth + 1, true, alpha, beta);
                            board[i][j] = '';
                            bestScore = Math.min(score, bestScore);
                            beta = Math.min(beta, score);
                            if (beta <= alpha) break;
                        }
                    }
                }
                return bestScore;
            }
        }

// Function to check if a player has won
        function checkWinner(player) {
            for (let i = 0; i < 3; i++) {
                if (board[i][0] === player && board[i][1] === player && board[i][2] === player) return true;
                if (board[0][i] === player && board[1][i] === player && board[2][i] === player) return true;
            }
            if (board[0][0] === player && board[1][1] === player && board[2][2] === player) return true;
            if (board[0][2] === player && board[1][1] === player && board[2][0] === player) return true;
            return false;
        }

// Function to show game messages
        function showMessage(message) {
            alert(message);
        }
    </script>
</body>
</html>
```