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

No:3115

1203

オセロルールは以下の通りです・盤は縦8×横8マス・初期状態で真ん中の4マスに白黒の石..ALL
Developer もちきなこ｜Date and time 23/6/23 22:04:08
Build time 116.076 sec｜Game capacity 15.435KB｜

以下がオセロの実装例となります。

オセロ

黒の石:

白の石:

オセロのルールに基づき、8×8の盤面を作成。初期状態では真ん中4マスに白黒の石が配置されます。プレイヤーは黒、AIは白の石を置きます。先攻を黒とし、交互に石を置いていきます。石を置ける場所は、(1)置くマスに他の石がないこと、(2)置くマスの上下左右、斜め1マスの場所に相手の石があること、(3)置いた石、相手の石があった方向の延長上に自身の石があること、の3つの条件を満たしていなければなりません。石を置ける場所がない場合はパスをして相手の番になります。すべてのマスに石が置かれた時点でゲーム終了です。石の数が多い方が勝者となります。スマホでも遊べるように画面は自動的に調整されます。また、AIのターン中は0.5秒のウェイトがあり、人間に対して有利なプログラムになっています。

→ 　

1　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

以下がオセロの実装例となります。

<!DOCTYPE html>
<html>
    <head>
        <title>オセロ</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
            th, td {
                width: 30px;
                height: 30px;
                text-align: center;
            }
            .black {
                background-color: black;
            }
            .white {
                background-color: white;
            }
            .valid {
                background-color: rgba(0, 0, 0, 0.3);
            }
        </style>
    </head>
    <body>
        <h1>オセロ</h1>
        <table id="board">
        </table>
        <p>黒の石: <span id="black"></span></p>
        <p>白の石: <span id="white"></span></p>
        <button id="start">はじめる</button>
        <button id="restart" style="display: none;">もう一度</button>
        <script>
            const ROWS = 8;
            const COLS = 8;
            const PLAYER = 1;
            const AI = 2;
            const BLACK = 1;
            const WHITE = 2;
            
            let board = [];
            let blackScore = 0;
            let whiteScore = 0;
            let currentPlayer = BLACK;
            let gameOver = false;
            
            function createBoard() {
                let table = document.getElementById("board");
                for(let i = 0; i < ROWS; i++) {
                    let row = document.createElement("tr");
                    board[i] = [];
                    for(let j = 0; j < COLS; j++) {
                        let cell = document.createElement("td");
                        cell.setAttribute("id", `${i}-${j}`);
                        cell.addEventListener("click", function() {
                            if(!gameOver && isValidMove(i, j)) {
                                placeStone(i, j);
                            }
                        });
                        row.appendChild(cell);
                        board[i][j] = 0;
                    }
                    table.appendChild(row);
                }
            }
            
            function updateScores() {
                let blackElement = document.getElementById("black");
                let whiteElement = document.getElementById("white");
                blackElement.textContent = blackScore;
                whiteElement.textContent = whiteScore;
            }
            
            function isValidMove(row, col) {
                if(board[row][col] !== 0) {
                    return false;
                }
                
                let directions = [
                    [-1, -1],
                    [-1, 0],
                    [-1, 1],
                    [0, -1],
                    [0, 1],
                    [1, -1],
                    [1, 0],
                    [1, 1]
                ];
                
                let valid = false;
                for(let i = 0; i < directions.length; i++) {
                    let dir = directions[i];
                    let r = row + dir[0];
                    let c = col + dir[1];
                    if(r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === getOpponent()) {
                        while(r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === getOpponent()) {
                            r += dir[0];
                            c += dir[1];
                        }
                        if(r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === currentPlayer) {
                            valid = true;
                        }
                    }
                }
                
                return valid;
            }
            
            function getOpponent() {
                if(currentPlayer === BLACK) {
                    return WHITE;
                } else {
                    return BLACK;
                }
            }
            
            function placeStone(row, col) {
                board[row][col] = currentPlayer;
                let cell = document.getElementById(`${row}-${col}`);
                if(currentPlayer === BLACK) {
                    cell.classList.add("black");
                    blackScore++;
                } else {
                    cell.classList.add("white");
                    whiteScore++;
                }
                
                let directions = [
                    [-1, -1],
                    [-1, 0],
                    [-1, 1],
                    [0, -1],
                    [0, 1],
                    [1, -1],
                    [1, 0],
                    [1, 1]
                ];
                
                for(let i = 0; i < directions.length; i++) {
                    let dir = directions[i];
                    let r = row + dir[0];
                    let c = col + dir[1];
                    if(r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === getOpponent()) {
                        let flips = [];
                        while(r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === getOpponent()) {
                            flips.push([r, c]);
                            r += dir[0];
                            c += dir[1];
                        }
                        if(r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === currentPlayer) {
                            for(let j = 0; j < flips.length; j++) {
                                let flipRow = flips[j][0];
                                let flipCol = flips[j][1];
                                board[flipRow][flipCol] = currentPlayer;
                                let flipCell = document.getElementById(`${flipRow}-${flipCol}`);
                                if(currentPlayer === BLACK) {
                                    blackScore++;
                                    whiteScore--;
                                    flipCell.classList.remove("white");
                                    flipCell.classList.add("black");
                                } else {
                                    blackScore--;
                                    whiteScore++;
                                    flipCell.classList.remove("black");
                                    flipCell.classList.add("white");
                                }
                            }
                        }
                    }
                }
                
                updateScores();
                
                let validMovesExist = false;
                for(let i = 0; i < ROWS; i++) {
                    for(let j = 0; j < COLS; j++) {
                        if(isValidMove(i, j)) {
                            validMovesExist = true;
                            let cell = document.getElementById(`${i}-${j}`);
                            cell.classList.add("valid");
                        } else {
                            let cell = document.getElementById(`${i}-${j}`);
                            cell.classList.remove("valid");
                        }
                    }
                }
                
                if(!validMovesExist) {
                    currentPlayer = getOpponent();
                    for(let i = 0; i < ROWS; i++) {
                        for(let j = 0; j < COLS; j++) {
                            if(isValidMove(i, j)) {
                                return;
                            }
                        }
                    }
                    gameOver = true;
                    endGame();
                } else {
                    if(currentPlayer === BLACK) {
                        currentPlayer = WHITE;
                        aiMove();
                    } else {
                        currentPlayer = BLACK;
                    }
                }
            }
            
            function aiMove() {
                setTimeout(function() {
                    let bestScore = Number.NEGATIVE_INFINITY;
                    let bestMove = [];
                    
                    for(let i = 0; i < ROWS; i++) {
                        for(let j = 0; j < COLS; j++) {
                            if(isValidMove(i, j)) {
                                let score = getScoreForMove(i, j);
                                if(score > bestScore) {
                                    bestScore = score;
                                    bestMove = [[i, j]];
                                } else if(score === bestScore) {
                                    bestMove.push([i, j]);
                                }
                            }
                        }
                    }
                    
                    let randomIndex = Math.floor(Math.random() * bestMove.length);
                    let row = bestMove[randomIndex][0];
                    let col = bestMove[randomIndex][1];
                    placeStone(row, col);
                }, 500);
            }
            
            function getScoreForMove(row, col) {
                let score = 0;
                let directions = [
                    [-1, -1],
                    [-1, 0],
                    [-1, 1],
                    [0, -1],
                    [0, 1],
                    [1, -1],
                    [1, 0],
                    [1, 1]
                ];
                
                for(let i = 0; i < directions.length; i++) {
                    let dir = directions[i];
                    let r = row + dir[0];
                    let c = col + dir[1];
                    let flips = 0;
                    while(r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === getOpponent()) {
                        flips++;
                        r += dir[0];
                        c += dir[1];
                    }
                    if(r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c] === currentPlayer) {
                        score += flips;
                    }
                }
                
                return score;
            }
            
            function endGame() {
                let message = "";
                if(blackScore > whiteScore) {
                    message = "黒の勝ち！";
                } else if(blackScore < whiteScore) {
                    message = "白の勝ち！";
                } else {
                    message = "引き分け！";
                }
                
                alert(message);
                
                let startButton = document.getElementById("start");
                startButton.style.display = "none";
                
                let restartButton = document.getElementById("restart");
                restartButton.style.display = "";
            }
            
            function startGame() {
                let startButton = document.getElementById("start");
                startButton.style.display = "none";
                
                let restartButton = document.getElementById("restart");
                restartButton.style.display = "";
                
                let middleRow = Math.floor(ROWS / 2) - 1;
                let middleCol = Math.floor(COLS / 2) - 1;
                
                board[middleRow][middleCol] = WHITE;
                board[middleRow][middleCol + 1] = BLACK;
                board[middleRow + 1][middleCol] = BLACK;
                board[middleRow + 1][middleCol + 1] = WHITE;
                
                let whiteCell = document.getElementById(`${middleRow}-${middleCol}`);
                whiteCell.classList.add("white");
                let blackCell = document.getElementById(`${middleRow}-${middleCol + 1}`);
                blackCell.classList.add("black");
                blackScore = 2;
                let anotherBlackCell = document.getElementById(`${middleRow + 1}-${middleCol}`);
                anotherBlackCell.classList.add("black");
                blackScore = 2;
                let anotherWhiteCell = document.getElementById(`${middleRow + 1}-${middleCol + 1}`);
                anotherWhiteCell.classList.add("white");
                whiteScore = 2;
                
                currentPlayer = BLACK;
                gameOver = false;
                
                updateScores();
                
                let validMovesExist = false;
                for(let i = 0; i < ROWS; i++) {
                    for(let j = 0; j < COLS; j++) {
                        if(isValidMove(i, j)) {
                            validMovesExist = true;
                            let cell = document.getElementById(`${i}-${j}`);
                            cell.classList.add("valid");
                        }
                    }
                }
                
                if(currentPlayer === WHITE) {
                    aiMove();
                }
            }
            
            function restartGame() {
                let table = document.getElementById("board");
                while(table.firstChild) {
                    table.removeChild(table.firstChild);
                }
                board = [];
                blackScore = 0;
                whiteScore = 0;
                currentPlayer = BLACK;
                gameOver = false;
                
                createBoard();
                
                let startButton = document.getElementById("start");
                startButton.style.display = "";
                
                let restartButton = document.getElementById("restart");
                restartButton.style.display = "none";
                
                let blackElement = document.getElementById("black");
                let whiteElement = document.getElementById("white");
                blackElement.textContent = blackScore;
                whiteElement.textContent = whiteScore;
            }
            
            createBoard();
            
            let startButton = document.getElementById("start");
            startButton.addEventListener("click", startGame);
            
            let restartButton = document.getElementById("restart");
            restartButton.addEventListener("click", restartGame);
        </script>
    </body>
</html>

オセロのルールに基づき、8×8の盤面を作成。初期状態では真ん中4マスに白黒の石が配置されます。プレイヤーは黒、AIは白の石を置きます。先攻を黒とし、交互に石を置いていきます。石を置ける場所は、(1)置くマスに他の石がないこと、(2)置くマスの上下左右、斜め1マスの場所に相手の石があること、(3)置いた石、相手の石があった方向の延長上に自身の石があること、の3つの条件を満たしていなければなりません。石を置ける場所がない場合はパスをして相手の番になります。すべてのマスに石が置かれた時点でゲーム終了です。石の数が多い方が勝者となります。スマホでも遊べるように画面は自動的に調整されます。また、AIのターン中は0.5秒のウェイトがあり、人間に対して有利なプログラムになっています。