AI game creator

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

No:30979

←

Prev Next

→

オセロ
Developer User14987｜Date and time 23/12/24 18:56:05
Build time 52.792 sec｜Game capacity 9.254KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>オセロ</title>
    <style>
        body {
            background-color: #006400;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#board {
            display: inline-block;
        }

.cell {
            width: 40px;
            height: 40px;
            background-color: #8B4513;
            border: 1px solid black;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.black {
            color: #000000;
        }

.white {
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div id="board"></div>

// 初期配置
        const INIT_CONFIG = [
            [' ',' ',' ',' ',' ',' ',' ',' '],
            [' ',' ',' ',' ',' ',' ',' ',' '],
            [' ',' ',' ',' ',' ',' ',' ',' '],
            [' ',' ',' ','W','B',' ',' ',' '],
            [' ',' ',' ','B','W',' ',' ',' '],
            [' ',' ',' ',' ',' ',' ',' ',' '],
            [' ',' ',' ',' ',' ',' ',' ',' '],
            [' ',' ',' ',' ',' ',' ',' ',' '],
        ];

// 石の状態
        const EMPTY = ' ';
        const BLACK = 'B';
        const WHITE = 'W';

// 現在のプレーヤー
        let currentPlayer = BLACK;

// 盤面の状態
        let boardState = INIT_CONFIG;

// 盤面を描画する関数
        function drawBoard() {
            const board = document.getElementById('board');
            board.innerHTML = '';

for (let i = 0; i < SIZE; i++) {
                for (let j = 0; j < SIZE; j++) {
                    const cellDiv = document.createElement('div');
                    cellDiv.classList.add('cell');
                    cellDiv.innerHTML = boardState[i][j];

if (boardState[i][j] === BLACK) {
                        cellDiv.classList.add('black');
                    } else if (boardState[i][j] === WHITE) {
                        cellDiv.classList.add('white');
                    }

cellDiv.addEventListener('click', function() {
                        if (boardState[i][j] === EMPTY) {
                            if (isValidMove(i, j)) {
                                placeStone(i, j);
                                switchPlayer();
                                drawBoard();
                            }
                        }
                    });

board.appendChild(cellDiv);
                }
            }
        }

// 石を置く関数
        function placeStone(row, col) {
            boardState[row][col] = currentPlayer;

// 上方向
            let r = row - 1;
            let c = col;
            while (r >= 0 && boardState[r][c] === getOpponent()) {
                r--;
            }
            if (r >= 0 && boardState[r][c] === currentPlayer) {
                flipStones(row, col, r, c, -1, 0);
            }

// 下方向
            r = row + 1;
            while (r < SIZE && boardState[r][c] === getOpponent()) {
                r++;
            }
            if (r < SIZE && boardState[r][c] === currentPlayer) {
                flipStones(row, col, r, c, 1, 0);
            }

// 左方向
            r = row;
            c = col - 1;
            while (c >= 0 && boardState[r][c] === getOpponent()) {
                c--;
            }
            if (c >= 0 && boardState[r][c] === currentPlayer) {
                flipStones(row, col, r, c, 0, -1);
            }

// 右方向
            c = col + 1;
            while (c < SIZE && boardState[r][c] === getOpponent()) {
                c++;
            }
            if (c < SIZE && boardState[r][c] === currentPlayer) {
                flipStones(row, col, r, c, 0, 1);
            }

// 左上方向
            r = row - 1;
            c = col - 1;
            while (r >= 0 && c >= 0 && boardState[r][c] === getOpponent()) {
                r--;
                c--;
            }
            if (r >= 0 && c >= 0 && boardState[r][c] === currentPlayer) {
                flipStones(row, col, r, c, -1, -1);
            }

// 右下方向
            r = row + 1;
            c = col + 1;
            while (r < SIZE && c < SIZE && boardState[r][c] === getOpponent()) {
                r++;
                c++;
            }
            if (r < SIZE && c < SIZE && boardState[r][c] === currentPlayer) {
                flipStones(row, col, r, c, 1, 1);
            }

// 左下方向
            r = row + 1;
            c = col - 1;
            while (r < SIZE && c >= 0 && boardState[r][c] === getOpponent()) {
                r++;
                c--;
            }
            if (r < SIZE && c >= 0 && boardState[r][c] === currentPlayer) {
                flipStones(row, col, r, c, 1, -1);
            }

// 右上方向
            r = row - 1;
            c = col + 1;
            while (r >= 0 && c < SIZE && boardState[r][c] === getOpponent()) {
                r--;
                c++;
            }
            if (r >= 0 && c < SIZE && boardState[r][c] === currentPlayer) {
                flipStones(row, col, r, c, -1, 1);
            }
        }

// 石をひっくり返す関数
        function flipStones(row, col, endRow, endCol, rowStep, colStep) {
            let r = row;
            let c = col;

while (r !== endRow || c !== endCol) {
                r += rowStep;
                c += colStep;
                boardState[r][c] = currentPlayer;
            }
        }

// 指定した位置に石を置けるかどうかを判定する関数
        function isValidMove(row, col) {
            if (boardState[row][col] !== EMPTY) {
                return false;
            }

let isValid = false;

// 上方向
            let r = row - 1;
            let c = col;
            while (r >= 0 && boardState[r][c] === getOpponent()) {
                r--;
            }
            if (r >= 0 && boardState[r][c] === currentPlayer && row - r > 1) {
                isValid = true;
            }

// 下方向
            r = row + 1;
            while (r < SIZE && boardState[r][c] === getOpponent()) {
                r++;
            }
            if (r < SIZE && boardState[r][c] === currentPlayer && r - row > 1) {
                isValid = true;
            }

// 左方向
            r = row;
            c = col - 1;
            while (c >= 0 && boardState[r][c] === getOpponent()) {
                c--;
            }
            if (c >= 0 && boardState[r][c] === currentPlayer && col - c > 1) {
                isValid = true;
            }

// 右方向
            c = col + 1;
            while (c < SIZE && boardState[r][c] === getOpponent()) {
                c++;
            }
            if (c < SIZE && boardState[r][c] === currentPlayer && c - col > 1) {
                isValid = true;
            }

// 左上方向
            r = row - 1;
            c = col - 1;
            while (r >= 0 && c >= 0 && boardState[r][c] === getOpponent()) {
                r--;
                c--;
            }
            if (r >= 0 && c >= 0 && boardState[r][c] === currentPlayer && row - r > 1 && col - c > 1) {
                isValid = true;
            }

// 右下方向
            r = row + 1;
            c = col + 1;
            while (r < SIZE && c < SIZE && boardState[r][c] === getOpponent()) {
                r++;
                c++;
            }
            if (r < SIZE && c < SIZE && boardState[r][c] === currentPlayer && r - row > 1 && c - col > 1) {
                isValid = true;
            }

// 左下方向
            r = row + 1;
            c = col - 1;
            while (r < SIZE && c >= 0 && boardState[r][c] === getOpponent()) {
                r++;
                c--;
            }
            if (r < SIZE && c >= 0 && boardState[r][c] === currentPlayer && r - row > 1 && col - c > 1) {
                isValid = true;
            }

// 右上方向
            r = row - 1;
            c = col + 1;
            while (r >= 0 && c < SIZE && boardState[r][c] === getOpponent()) {
                r--;
                c++;
            }
            if (r >= 0 && c < SIZE && boardState[r][c] === currentPlayer && row - r > 1 && c - col > 1) {
                isValid = true;
            }

return isValid;
        }

// 対戦相手の石を返す関数
        function getOpponent() {
            return currentPlayer === BLACK ? WHITE : BLACK;
        }

// プレーヤーを切り替える関数
        function switchPlayer() {
            currentPlayer = getOpponent();
        }

// ゲームの初期化
        function initGame() {
            currentPlayer = BLACK;
            boardState = INIT_CONFIG;
            drawBoard();
        }

// ゲームの開始
        initGame();
    </script>
</body>
</html>