TypeScriptで型安全なゲームループを設計する — Snake・Tetrisの状態管理

type GameState =
  | { phase: 'playing'; snake: Point[]; food: Point; direction: Direction; score: number }
  | { phase: 'gameover'; finalScore: number }
  | { phase: 'paused'; snapshot: GameState & { phase: 'playing' } }

type Direction = 'up' | 'down' | 'left' | 'right'
type Point = { x: number; y: number }

// useRef: 60fpsで更新されるが描画トリガーにならないもの
const gameStateRef = useRef<GameState>(initialState)
const inputQueueRef = useRef<Direction[]>([])
const lastTickRef = useRef(0)

// useState: UIに反映されるもの
const [score, setScore] = useState(0)
const [phase, setPhase] = useState<'playing' | 'gameover' | 'paused'>('playing')

function handleKeyDown(e: KeyboardEvent) {
  const dirMap: Record<string, Direction> = {
    ArrowUp: 'up',
    ArrowDown: 'down',
    ArrowLeft: 'left',
    ArrowRight: 'right',
  }

  const dir = dirMap[e.key]
  if (!dir) return

  const queue = inputQueueRef.current
  const last = queue.length > 0 ? queue[queue.length - 1] : currentDirection

  // 逆方向入力を無視（自分に衝突するため）
  const opposites: Record<Direction, Direction> = {
    up: 'down', down: 'up', left: 'right', right: 'left',
  }
  if (opposites[dir] === last) return

  queue.push(dir)
}

const TICK_INTERVAL = 100 // ms

function gameLoop(timestamp: number) {
  if (gameStateRef.current.phase !== 'playing') return

  if (timestamp - lastTickRef.current >= TICK_INTERVAL) {
    lastTickRef.current = timestamp

    // 入力キューから方向を取得
    const dir = inputQueueRef.current.shift() ?? currentDirection

    // ゲーム状態を更新
    const nextState = tick(gameStateRef.current, dir)
    gameStateRef.current = nextState

    // UIに反映が必要な変更だけsetState
    if (nextState.phase === 'playing') {
      setScore(nextState.score)
    } else if (nextState.phase === 'gameover') {
      setPhase('gameover')
    }

    // Canvas描画
    render(nextState)
  }

  rafRef.current = requestAnimationFrame(gameLoop)
}

const TETROMINOS = {
  I: { shape: [[1, 1, 1, 1]], color: '#00f0f0' },
  O: { shape: [[1, 1], [1, 1]], color: '#f0f000' },
  T: { shape: [[0, 1, 0], [1, 1, 1]], color: '#a000f0' },
  S: { shape: [[0, 1, 1], [1, 1, 0]], color: '#00f000' },
  Z: { shape: [[1, 1, 0], [0, 1, 1]], color: '#f00000' },
  J: { shape: [[1, 0, 0], [1, 1, 1]], color: '#0000f0' },
  L: { shape: [[0, 0, 1], [1, 1, 1]], color: '#f0a000' },
} as const satisfies Record<string, { shape: number[][]; color: string }>

function rotate(shape: number[][]): number[][] {
  const rows = shape.length
  const cols = shape[0].length
  const rotated: number[][] = Array.from({ length: cols }, () =>
    new Array(rows).fill(0)
  )

  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      rotated[x][rows - 1 - y] = shape[y][x]
    }
  }

  return rotated
}

function updateBall(ball: Ball, paddle: Paddle, bricks: Brick[], dt: number) {
  ball.x += ball.vx * dt
  ball.y += ball.vy * dt

  // 壁反射
  if (ball.x - ball.r < 0 || ball.x + ball.r > width) ball.vx *= -1

  // パドル衝突
  if (intersectsRect(ball, paddle)) {
    ball.vy = -Math.abs(ball.vy)
    // パドル上の当たり位置で反射角を変える
    const offset = (ball.x - paddle.x) / (paddle.w / 2)
    ball.vx = offset * 5
  }
}