ピンボールの物理シミュレーション — フリッパー・バンパー・重力をCanvas APIで実装する

const W = 320
const H = 480
const BALL_R = 6
const GRAVITY = 0.15
const DAMPING = 0.98
const BUMPER_BOUNCE = 8
const FLIPPER_LEN = 50
const FLIPPER_W = 8

ball.vy += GRAVITY * dt
ball.vx *= DAMPING
ball.vy *= DAMPING
ball.x += ball.vx * dt
ball.y += ball.vy * dt

const rawDt = time - lastTimeRef.current
const dt = Math.min(rawDt, 32) / 16.67

for (const bumper of bumpers) {
  const dx = ball.x - bumper.x
  const dy = ball.y - bumper.y
  const dist = Math.sqrt(dx * dx + dy * dy)
  const minDist = BALL_R + bumper.r
  if (dist < minDist && dist > 0) {
    const nx = dx / dist
    const ny = dy / dist
    // 位置を分離
    ball.x = bumper.x + nx * minDist
    ball.y = bumper.y + ny * minDist
    // 速度を法線方向に固定値で設定
    ball.vx = nx * BUMPER_BOUNCE
    ball.vy = ny * BUMPER_BOUNCE
  }
}

const FLIPPER_REST_ANGLE = 0.45   // 下がった状態（ラジアン）
const FLIPPER_UP_ANGLE = -0.55    // 上がった状態
const FLIPPER_SPEED = 0.25

// 毎フレームの角度更新
for (const f of [flipL, flipR]) {
  const diff = f.targetAngle - f.angle
  if (Math.abs(diff) > 0.01) {
    f.angle += diff * FLIPPER_SPEED * dt * 3
  } else {
    f.angle = f.targetAngle
  }
}

const cosA = Math.cos(f.angle)
const sinA = Math.sin(f.angle)
const dir = f.side === 'left' ? 1 : -1
const endX = f.pivotX + cosA * FLIPPER_LEN * dir
const endY = f.pivotY + sinA * FLIPPER_LEN * dir

// ボールを線分に射影
const segDx = endX - f.pivotX
const segDy = endY - f.pivotY
const segLen = Math.sqrt(segDx * segDx + segDy * segDy)

const t = Math.max(0, Math.min(1,
  ((ball.x - f.pivotX) * segDx + (ball.y - f.pivotY) * segDy)
    / (segLen * segLen)
))
const closestX = f.pivotX + t * segDx
const closestY = f.pivotY + t * segDy

if (cDist < hitDist && cDist > 0) {
  const nx = cdx / cDist
  const ny = cdy / cDist
  ball.x = closestX + nx * hitDist
  ball.y = closestY + ny * hitDist

  // フリッパーが回転中なら追加ブースト
  const isFlipping = Math.abs(f.targetAngle - f.angle) > 0.1
  const flipBoost = isFlipping ? 6 : 0
  const speed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy)
  const bounceSpeed = Math.max(speed * 0.7, 3) + flipBoost
  ball.vx = nx * bounceSpeed
  ball.vy = ny * bounceSpeed
}

const guideCollision = (
  gx1: number, gy1: number,
  gx2: number, gy2: number,
) => {
  // 線分への射影（フリッパーと同じアルゴリズム）
  // ...
  if (gDist < BALL_R + 3 && gDist > 0) {
    const gnx = gcDx / gDist
    const gny = gcDy / gDist
    ball.x = gcx + gnx * (BALL_R + 3)
    ball.y = gcy + gny * (BALL_R + 3)
    // 速度の反射
    const dot = ball.vx * gnx + ball.vy * gny
    ball.vx -= 2 * dot * gnx * 0.6
    ball.vy -= 2 * dot * gny * 0.6
  }
}

// 充填（スペースキー押下中）
if (chargingRef.current && currentPhase === 'launching') {
  chargeRef.current = Math.min(
    chargeRef.current + LAUNCHER_CHARGE_RATE * dt,
    LAUNCHER_MAX,
  )
}

// 発射（スペースキー解放時）
const power = Math.max(LAUNCHER_MIN, chargeRef.current)
ballRef.current.vy = -power
ballRef.current.vx = -0.5

// 左壁
if (ball.x - BALL_R < WALL_THICK) {
  ball.x = WALL_THICK + BALL_R
  ball.vx = Math.abs(ball.vx) * 0.8
}
// 右壁
if (ball.x + BALL_R > cw - WALL_THICK) {
  ball.x = cw - WALL_THICK - BALL_R
  ball.vx = -Math.abs(ball.vx) * 0.8
}

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width } = entry.contentRect
    const scale = width / W
    scaleRef.current = scale
    const h = H * scale
    resizeCanvas(canvas, width, h)
  }
})

// 描画ループ
ctx.save()
ctx.scale(dpr * scale, dpr * scale)
// ... 320x480座標系で描画
ctx.restore()