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

No:15679

←

Prev Next

→

AIにゲームさせるアプリ
Developer User6818｜Date and time 23/9/10 19:10:13
Build time 30.839 sec｜Game capacity 4.12KB｜

Script

ゲーム

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ゲーム</title>
<style>
    body {
        text-align: center;
    }

.board {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

.cell {
        width: 33.33%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
    <h1>ゲーム</h1>
    <div class="board"></div>

makeMove(index) {
                if (this.gameOver || this.board[index] !== '') {
                    return;
                }

this.board[index] = this.currentPlayer;
                this.checkWinner();
                this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X';

if (!this.gameOver && this.currentPlayer === 'O') {
                    setTimeout(() => {
                        this.makeComputerMove();
                    }, 500);
                }
            }

makeComputerMove() {
                const emptyIndexes = [];

for (let i = 0; i < this.board.length; i++) {
                    if (this.board[i] === '') {
                        emptyIndexes.push(i);
                    }
                }

const randomIndex = emptyIndexes[Math.floor(Math.random() * emptyIndexes.length)];
                this.makeMove(randomIndex);
            }

checkWinner() {
                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]
                ];

for (const combination of winningCombinations) {
                    const [a, b, c] = combination;

if (this.board[a] && this.board[a] === this.board[b] && this.board[a] === this.board[c]) {
                        this.gameOver = true;
                        break;
                    }
                }

if (this.gameOver) {
                    setTimeout(() => {
                        alert(`Player ${this.currentPlayer} wins!`);
                    }, 100);
                } else if (this.board.every(cell => cell !== '')) {
                    setTimeout(() => {
                        alert("It's a tie!");
                    }, 100);
                }
            }
        }

// ゲームの表示を管理するクラス
        class GameRenderer {
            constructor(game) {
                this.game = game;
                this.boardElement = document.querySelector('.board');
                this.cells = [];
            }

render() {
                this.boardElement.innerHTML = '';

this.cells = this.game.board.map((cell, index) => {
                    const cellElement = document.createElement('div');
                    cellElement.classList.add('cell');
                    cellElement.textContent = cell;
                    cellElement.addEventListener('click', () => {
                        this.game.makeMove(index);
                        this.render();
                    });

this.boardElement.appendChild(cellElement);
                    return cellElement;
                });
            }
        }

// ゲームの初期化
        const game = new Game();
        const gameRenderer = new GameRenderer(game);
        gameRenderer.render();
    </script>
</body>
</html>