Make a simple tic tac toe game where the player gets a turn to put an x on the board and they press a button to switch the turn over to the ai that puts an o on the board and presses the same button. 3 in a row to win. When game ends in a draw or a win button at the top to reset's game

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

No:30603

←

Prev Next

→

Make a simple tic tac toe game where the player ge..ALL
Developer User14889｜Date and time 23/12/23 9:17:00
Build time 25.09 sec｜Game capacity 4.874KB｜

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 {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 300px;
            margin: 0 auto;
            text-align: center;
            margin-top: 100px;
        }
        .board {
            border: 1px solid #000;
            display: inline-block;
            margin-bottom: 20px;
        }
        .cell {
            width: 98px;
            height: 98px;
            border: 1px solid #000;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 40px;
        }
        .button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Tic Tac Toe</h2>
        <div class="board">
            <div class="cell" onclick="makeMove(0)"></div>
            <div class="cell" onclick="makeMove(1)"></div>
            <div class="cell" onclick="makeMove(2)"></div>
            <br>
            <div class="cell" onclick="makeMove(3)"></div>
            <div class="cell" onclick="makeMove(4)"></div>
            <div class="cell" onclick="makeMove(5)"></div>
            <br>
            <div class="cell" onclick="makeMove(6)"></div>
            <div class="cell" onclick="makeMove(7)"></div>
            <div class="cell" onclick="makeMove(8)"></div>
        </div>
        <button class="button" onclick="resetGame()">Reset Game</button>
    </div>

// Initialize game variables
        var currentPlayer;
        var board;
        var gameOver;
        var winningIndices = [
            [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
        ];

// Function to start the game
        function startGame() {
            currentPlayer = 'X';
            board = ['', '', '', '', '', '', '', '', ''];
            gameOver = false;
            Array.from(cells).forEach(cell => {
                cell.innerText = '';
                cell.style.backgroundColor = '';
            });
        }

// Function to handle player move
        function makeMove(cellIndex) {
            if (!gameOver && board[cellIndex] === '') {
                board[cellIndex] = currentPlayer;
                cells[cellIndex].innerText = currentPlayer;
                cells[cellIndex].style.backgroundColor = '#f0f0f0';
                checkForWinner(currentPlayer);
                currentPlayer = (currentPlayer === 'X') ? 'O' : 'X';
                setTimeout(makeAIMove, 500); // Switch to AI's turn with a slight delay
            }
        }
        
        // Function to handle AI move
        function makeAIMove() {
            if (!gameOver) {
                var availableMoves = [];
                for (var i = 0; i < board.length; i++) {
                    if (board[i] === '') {
                        availableMoves.push(i);
                    }
                }
                var randomMove = availableMoves[Math.floor(Math.random() * availableMoves.length)];
                makeMove(randomMove);
            }
        }

// Function to check for winner
        function checkForWinner(player) {
            for (var i = 0; i < winningIndices.length; i++) {
                var [a, b, c] = winningIndices[i];
                if (board[a] === player && board[b] === player && board[c] === player) {
                    gameOver = true;
                    highlightWinningCells(a, b, c);
                    break;
                }
            }
            if (!board.includes('') && !gameOver) {
                gameOver = true;
            }
            if (gameOver) {
                setTimeout(showResult, 500);
            }
        }

// Function to highlight winning cells
        function highlightWinningCells(cellIndex1, cellIndex2, cellIndex3) {
            cells[cellIndex1].style.backgroundColor = 'lightgreen';
            cells[cellIndex2].style.backgroundColor = 'lightgreen';
            cells[cellIndex3].style.backgroundColor = 'lightgreen';
        }

// Function to show game result
        function showResult() {
            if (!board.includes('')) {
                alert('Game ended in a draw!');
            } else {
                alert('Player ' + currentPlayer + ' wins!');
            }
        }

// Function to reset the game
        function resetGame() {
            startGame();
        }

// Start the game
        startGame();
    </script>
</body>
</html>