オセロ開発解説 - 盤面の描画

盤面の描画

オセロの8x8盤面はHTML5 Canvasで描画します。グリッド線を線形に、コマを円形にレンダリングし、動的な状態更新をサポートします。

設計思想

Canvasの2Dコンテキストを使用し、盤面を480x480ピクセルの正方形に設定。各セルは60x60ピクセルで、グリッド線は黒、背景は緑（#228B22）。コマはセル中央に半径24ピクセルの円で描画。状態管理は2次元配列（`board`）で、null（空）、'black'、'white'を保持。

サンプルコード

const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const boardSize = 8;
const cellSize = canvas.width / boardSize;

function drawBoard() {
    ctx.fillStyle = '#228B22';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    for (let i = 0; i <= boardSize; i++) {
        ctx.beginPath();
        ctx.moveTo(i * cellSize, 0);
        ctx.lineTo(i * cellSize, canvas.height);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(0, i * cellSize);
        ctx.lineTo(canvas.width, i * cellSize);
        ctx.stroke();
    }
    for (let row = 0; row < boardSize; row++) {
        for (let col = 0; col < boardSize; col++) {
            if (board[row][col]) {
                ctx.beginPath();
                ctx.arc((col + 0.5) * cellSize, (row + 0.5) * cellSize, cellSize * 0.4, 0, Math.PI * 2);
                ctx.fillStyle = board[row][col];
                ctx.fill();
            }
        }
    }
}
            

解説

`drawBoard`は盤面をクリアし、緑の背景を描画後、グリッド線を2本のループで引きます。コマは`board`配列を走査し、存在する場合に円を描画。`ctx.arc`で滑らかな円を保証し、`fillStyle`で黒/白を動的に設定。パフォーマンスのため、必要時のみ再描画します。