シンプルオセロ 単純な時間つぶしオセロゲーム Javascript

<div class="board"></div>

.board {
    display: grid;
    grid-template-columns: repeat(8, 50px);
    grid-template-rows: repeat(8, 50px);
    gap: 1px;
}
.cell {
    background-color: green;
    border: 1px solid black;
}
.black {
    background-color: black;
    border-radius: 50%;
}
.white {
    background-color: white;
    border-radius: 50%;
}

const boardSize = 8;
let board = [];
let currentPlayer = 1; // 1: black, 2: white

// 初期盤面を生成
function createBoard() {
    for (let i = 0; i < boardSize; i++) {
        board[i] = [];
        for (let j = 0; j < boardSize; j++) {
            board[i][j] = 0; // 0: empty, 1: black, 2: white
        }
    }
    board[3][3] = 2;
    board[3][4] = 1;
    board[4][3] = 1;
    board[4][4] = 2;
}

// 盤面を描画
function drawBoard() {
    const boardContainer = document.querySelector('.board');
    boardContainer.innerHTML = '';
    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            if (board[i][j] === 1) {
                cell.classList.add('black');
            } else if (board[i][j] === 2) {
                cell.classList.add('white');
            }
            cell.dataset.row = i;
            cell.dataset.col = j;
            cell.addEventListener('click', handleCellClick);
            boardContainer.appendChild(cell);
        }
    }
}

// クリックされたセルの処理
function handleCellClick(event) {
    const row = parseInt(event.target.dataset.row);
    const col = parseInt(event.target.dataset.col);
    if (board[row][col] === 0 && isValidMove(row, col)) {
        board[row][col] = currentPlayer;
        flipOpponentStones(row, col);
        currentPlayer = currentPlayer === 1 ? 2 : 1;
        drawBoard();
        if (currentPlayer === 2) {
            computerMove();
        }
    }
}

// セルが有効な置き場所かをチェック
function isValidMove(row, col) {
    const opponent = currentPlayer === 1 ? 2 : 1;
    const directions = [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]];
    for (const [dr, dc] of directions) {
        let r = row + dr;
        let c = col + dc;
        let hasOpponentStoneBetween = false;
        while (r >= 0 && r < boardSize && c >= 0 && c < boardSize) {
            if (board[r][c] === opponent) {
                hasOpponentStoneBetween = true;
            } else if (board[r][c] === currentPlayer && hasOpponentStoneBetween) {
                return true;
            } else {
                break;
            }
            r += dr;
            c += dc;
        }
    }
    return false;
}

// 相手の石をひっくり返す
function flipOpponentStones(row, col) {
    const opponent = currentPlayer === 1 ? 2 : 1;
    const directions = [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]];
    for (const [dr, dc] of directions) {
        let r = row + dr;
        let c = col + dc;
        let hasOpponentStoneBetween = false;
        while (r >= 0 && r < boardSize && c >= 0 && c < boardSize) {
            if (board[r][c] === opponent) {
                hasOpponentStoneBetween = true;
            } else if (board[r][c] === currentPlayer && hasOpponentStoneBetween) {
                let flipRow = row + dr;
                let flipCol = col + dc;
                while (flipRow !== r || flipCol !== c) {
                    board[flipRow][flipCol] = currentPlayer;
                    flipRow += dr;
                    flipCol += dc;
                }
                break;
            } else {
                break;
            }
            r += dr;
            c += dc;
        }
    }
}

// コンピュータの手を処理
function computerMove() {
    // ランダムに有効な手を選択
    const validMoves = [];
    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            if (board[i][j] === 0 && isValidMove(i, j)) {
                validMoves.push({ row: i, col: j });
            }
        }
    }
    if (validMoves.length > 0) {
        const randomIndex = Math.floor(Math.random() * validMoves.length);
        const computerMove = validMoves[randomIndex];
        board[computerMove.row][computerMove.col] = currentPlayer;
        flipOpponentStones(computerMove.row, computerMove.col);
        currentPlayer = currentPlayer === 1 ? 2 : 1;
        drawBoard();
    }
}

// ゲーム開始
function startGame() {
    createBoard();
    drawBoard();
}

// ゲーム開始
startGame();