オセロゲーム設計書（あなた vs CPU）

1. 目的

• スマホでも遊びやすい ユーザー（黒） vs CPU（白） を提供
• 盤面見切れを防ぐレスポンシブUI
• 手番進行停止を防ぐ堅牢な状態遷移

2. システム全体アーキテクチャ

flowchart LR
  U[User Browser] --> N[Nginx]
  N --> P[Othello Page]
  P --> UI[UI Layer]
  P --> GL[Game Logic]
  GL --> ST[State]
  GL --> AI[CPU Logic]
  GL --> RD[Render]

3. クライアント構成

3.1 画面

• 手番/スコア表示、難易度選択、リセット、8x8盤面、ステータス文言

3.2 レスポンシブ

• .board { width: 90vw; max-width: 500px; aspect-ratio: 1 / 1; }
• repeat(8, minmax(0,1fr)) で横はみ出し抑制
• モバイル時は余白・フォント・操作UIを圧縮

4. 状態モデル

classDiagram
  class GameState {
    board: intMatrix8x8
    current: int
    gameOver: boolean
    cpuThinking: boolean
  }
  class Constants {
    EMPTY=0
    BLACK=1
    WHITE=-1
    SIZE=8
  }

5. 主要ロジック

• getFlips(): 8方向反転判定
• getValidMoves(): 合法手抽出
• advanceTurnAfterMove(): パス/終局/手番遷移
• place(): 人間入力ガード（終局/CPU思考中/CPU手番/非合法手）
• maybeCpuPlay(): CPU二重起動防止 + 思考演出
• cpuPlace(): CPU着手・パス・終局分岐

6. CPUアルゴリズム

• easy: ランダム着手
• normal: 反転数最大
• hard: 1手先評価（位置重み + 可動性 + 石差）

7. 手番進行シーケンス

sequenceDiagram
  participant H as Human Black
  participant L as Logic
  participant C as CPU White
  H->>L: place()
  L->>L: flip and update
  L->>L: advanceTurnAfterMove()
  alt CPU turn
    L->>L: maybeCpuPlay()
    L->>C: cpuPlace()
    C->>L: move or pass
    L->>L: advanceTurnAfterMove()
  else Human turn
    L->>H: wait input
  end

8. デプロイアーキテクチャ

flowchart LR
  W["workspace webops othello.html"] --> S["staging site othello.html"]
  S --> D["deploy-ishiwari-net"]
  D --> P["public game-center othello.html"]
  D --> N["nginx test and reload"]

9. テスト観点

• 黒先手固定、白CPU自動着手
• CPU思考中の人間入力遮断
• パス時に進行停止しない
• 終局時に勝敗表示
• スマホ縦横で盤面見切れ/横スクロールなし