ai vs ai turn for turn based game on a grid's game

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

No:52464

127

←

Prev Next

→

ai vs ai turn for turn based game on a grid
Developer User18896｜Date and time 24/3/22 9:21:36
Build time 9.272 sec｜Game capacity 2.909KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI vs AI Turn-Based Game</title>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 5px;
        }

.cell {
            width: 50px;
            height: 50px;
            background-color: lightgray;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="grid" id="grid"></div>
    <script>
        const grid = document.getElementById('grid');
        let currentPlayer = 'X';
        let cells = ['', '', '', '', '', '', '', '', ''];

function checkWinner() {
            const winCombos = [
                [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 combo of winCombos) {
                const [a, b, c] = combo;
                if (cells[a] && cells[a] === cells[b] && cells[a] === cells[c]) {
                    return cells[a];
                }
            }

return null;
        }

function drawGrid() {
            grid.innerHTML = '';
            for (let i = 0; i < cells.length; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.index = i;
                cell.innerText = cells[i] || '';
                cell.addEventListener('click', handleCellClick);
                grid.appendChild(cell);
            }
        }

function handleCellClick(event) {
            const index = event.target.dataset.index;
            if (cells[index] || checkWinner()) {
                return;
            }

cells[index] = currentPlayer;
            drawGrid();

const winner = checkWinner();
            if (winner) {
                alert(`Player ${winner} wins!`);
                return;
            }

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

setTimeout(makeAiMove, 500);
        }

function makeAiMove() {
            const emptyCells = cells.reduce((acc, val, index) => (!val ? acc.concat(index) : acc), []);
            const randomIndex = emptyCells[Math.floor(Math.random() * emptyCells.length)];
            cells[randomIndex] = currentPlayer;
            drawGrid();

const winner = checkWinner();
            if (winner) {
                alert(`Player ${winner} wins!`);
                return;
            }

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

drawGrid();
    </script>
</body>
</html>