Tic tac toe vs ai's game | AI game creator

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

No:48899

65

Tic tac toe vs ai
Developer User20876｜Date and time 24/3/3 6:54:33
Build time 8.329 sec｜Game capacity 2.388KB｜

→ 　

0　

0　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Tic Tac Toe</title>
</head>
<body>

<div id="container"></div>

<script>
    let board = ['', '', '', '', '', '', '', '', ''];
    const winningCombinations = [
        [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 container = document.getElementById('container');

function renderBoard() {
        container.innerHTML = '';
        board.forEach((cell, index) => {
            const cellElement = document.createElement('div');
            cellElement.classList.add('cell');
            cellElement.innerText = cell;
            cellElement.addEventListener('click', () => playerMove(index));
            container.appendChild(cellElement);
        });
    }

function playerMove(index) {
        if (board[index] === '') {
            board[index] = 'X';
            renderBoard();
            if (!checkWin() && !checkTie()) {
                aiMove();
            }
        }
    }

function aiMove() {
        const index = Math.floor(Math.random() * 9);
        if (board[index] === '') {
            board[index] = 'O';
            renderBoard();
            checkWin();
        } else {
            aiMove();
        }
    }

function checkWin() {
        for (let i = 0; i < winningCombinations.length; i++) {
            const [a, b, c] = winningCombinations[i];
            if (board[a] && board[a] === board[b] && board[a] === board[c]) {
                setTimeout(() => {
                    alert(`${board[a]} wins!`);
                    resetBoard();
                }, 10);
                return true;
            }
        }
        return false;
    }

function checkTie() {
        if (!board.includes('') && !checkWin()) {
            setTimeout(() => {
                alert("It's a tie!");
                resetBoard();
            }, 10);
            return true;
        }
        return false;
    }

function resetBoard() {
        board = ['', '', '', '', '', '', '', '', ''];
        renderBoard();
    }

renderBoard();
</script>

<style>
    .cell {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid black;
        text-align: center;
        line-height: 100px;
        font-size: 40px;
    }
</style>

</body>
</html>