オセロ開発解説 - 状態管理

状態管理

ゲーム状態をローカルストレージで保存・復元し、ユーザー操作とゲーム進行を同期。状態遷移を明確に管理し、堅牢な体験を提供します。

設計思想

状態は`gameState`（menu, countdown, playing, flipping, ended）、盤面（`board`）、現在のプレイヤー（`currentPlayer`）、プレイヤーの色（`playerColor`）、AIレベル（`aiLevel`）で構成。ローカルストレージにJSONで保存し、ページリロード時に復元。状態遷移はイベント駆動で、`canvas`クリックやボタン操作で制御。

サンプルコード

function saveBoard() {
    const gameData = { board, currentPlayer, playerColor, aiLevel };
    localStorage.setItem('othelloGame', JSON.stringify(gameData));
}

function loadBoard() {
    const savedData = localStorage.getItem('othelloGame');
    if (savedData) {
        const data = JSON.parse(savedData);
        board = data.board;
        currentPlayer = data.currentPlayer;
        playerColor = data.playerColor;
        aiLevel = data.aiLevel;
        drawBoard();
    }
}

document.getElementById('backButton').addEventListener('click', () => {
    gameState = 'menu';
    document.getElementById('menu').style.display = 'block';
    document.getElementById('backButton').style.display = 'none';
    document.getElementById('message').textContent = '';
    initBoard();
    flippingPieces = [];
    animationFrame = 0;
    drawBoard();
    localStorage.removeItem('othelloGame');
});
            

解説

`saveBoard`はゲーム状態をJSONにシリアライズし、ローカルストレージに保存。`loadBoard`は復元時に盤面を再描画。状態遷移は`gameState`で管理し、例えば`flipping`中にクリックを無効化。`backButton`の処理は状態をリセットし、ストレージをクリア。イベントリスナーは非同期操作（例：AIの`setTimeout`）と同期し、ユーザー体験を安定化。ストレージ使用量は約1KBで、軽量かつ効率的。