Vibecode Mini ハンズオン 🎮 Flappy Bird を作ろう

# Flappy Bird
HTML5 Canvas game — single file (index.html).

## Core Mechanic
- Bird falls with gravity, tap/click/space to flap
- Pipes scroll left, gap between top/bottom pipe
- Collision with pipe or ground = game over
- Pass through gap = +1 score

## Features
P0 (Must)
- Canvas-based rendering (no DOM game elements)
- Bird with gravity + flap physics
- Randomly generated pipe pairs with gap
- Collision detection (AABB with 3px leniency)
- Score counter (top center)
- Game states: READY → PLAYING → GAME_OVER
- Restart on click/space after game over
- High score (localStorage)

P1 (Nice to have)
- Bird rotation based on velocity
- Pipe color gradient
- Score flash animation
- Ground scrolling parallax
- Mobile touch support

## Visual Style
- Sky blue background (#70c5ce)
- Green pipes (#73bf2e)
- Yellow/orange bird
- Retro pixel-art feel (but CSS, no sprites)
- Clean, minimal UI

## Tech
- Single index.html file
- HTML5 Canvas API
- requestAnimationFrame game loop
- No external dependencies
- ~500 lines target

## Scope Boundary
- NO multiplayer
- NO sound (keep simple)
- NO frameworks/libraries
- NO multiple files

---
# 実際の結果: 663行 (目標~500行を超過)
# P0 8/8 ✅  P1 5/5 ✅  外部依存 0 ✅

# Flappy Bird — BLUEPRINT
**VB Mini Blueprint v1.0** | 2026-03-18 | APPROVED

## Tech Stack Decisions
| 項目        | 選択            | 理由                    |
| Rendering  | HTML5 Canvas   | ライブラリ不使用、直接制御  |
| Game loop  | rAF            | 60fps、ブラウザネイティブ |
| State      | Object + enum  | シンプル、フレームワーク不要|
| Persist    | localStorage   | セッション横断ハイスコア   |
| Input      | Click+Key+Touch | モバイル + デスクトップ   |

## STEP 1: Canvas + Game Loop
- HTML boilerplate, <canvas> 400×600px
- CFG: GRAVITY, FLAP_FORCE, PIPE_SPEED...
- State enum: READY | PLAYING | GAME_OVER
- rAF loop: update() + draw()
- Delta time (フレームレート独立)

## STEP 2: Bird
- {x, y, vy, radius, angle, flapAnim}
- gravity → vy, clamp 12, vy → y
- flap(): vy = FLAP_FORCE (-8.5)
- rotation: lerp angle ← vy * 0.08

## STEP 3: Pipes
- {x, gapTop, gapBottom, scored}
- gap 120px, random gapTop [60, groundY-180]
- spawn timer: 1500ms
- scroll left: PIPE_SPEED * dt
- gradient: #5DB82A → #3D8C1A

## STEP 4: Collision + Scoring
- AABB: circle vs pipe rects, 3px leniency
- ground: bird.y + radius >= groundY
- score: pipe.x + PIPE_WIDTH < bird.x
- flash: animate score size on increment

## STEP 5: Game States + Polish
- READY: overlay "Click to Start"
- GAME_OVER: score, high score, restart
- Ground: gradient + parallax lines
- Speed: PIPE_SPEED += 0.35 per 5pts
- Background: sky gradient

## Quality Gates
- [ ] Opens with no errors
- [ ] Bird flaps on click/space/touch
- [ ] Pipes scroll and collide
- [ ] Score increments correctly
- [ ] Game over + restart
- [ ] localStorage high score
- [ ] Responsive 400×600

ゲームループ

function gameLoop(timestamp) {
  const rawDt = lastTime
    ? (timestamp - lastTime) / (1000 / 60)
    : 1;
  // tab 復帰時の大きな dt を防ぐ
  const dt = Math.min(rawDt, 3);
  lastTime = timestamp;
  update(dt);
  draw();
  requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);

入力処理

function handleInput() {
  if (state === STATE.READY) {
    state = STATE.PLAYING; bird.flap();
  } else if (state === STATE.PLAYING) {
    bird.flap();
  } else if (state === STATE.GAME_OVER) {
    resetGame(); state = STATE.PLAYING;
    bird.flap();
  }
}
canvas.addEventListener('click', handleInput);
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault(); handleInput();
}, { passive: false });

衝突判定

function checkCollisions() {
  const br = bird.radius - CFG.LENIENCY;
  // 地面
  if (bird.y + bird.radius >= groundY)
    return true;
  // パイプ AABB (broad phase + narrow)
  for (let p of pipes) {
    const pw = CFG.PIPE_WIDTH;
    if (bird.x+br < p.x ||
        bird.x-br > p.x+pw) continue;
    if (bird.y-br < p.gapTop) return true;
    if (bird.y+br > p.gapBottom) return true;
  }
  return false;
}

localStorage ハイスコア

// 初期化
let highScore = parseInt(
  localStorage.getItem('flappyHigh') || '0'
);
// ゲームオーバー時に保存
if (score > highScore) {
  highScore = score;
  localStorage.setItem('flappyHigh', highScore);
}

## /vb-check Results — Flappy Bird

✅ 1. BUILD
   index.html loads without errors
   JS syntax: valid (node -e new Function...)

✅ 2. P0 FEATURES (8/8)
   ✅ Canvas-based rendering
   ✅ Bird with gravity + flap physics
   ✅ Random pipe pairs (120px gap)
   ✅ AABB collision (3px leniency)
   ✅ Score counter (top center)
   ✅ States: READY → PLAYING → GAME_OVER
   ✅ Restart on click/space/touch
   ✅ High score (localStorage)

✅ 3. P1 FEATURES (5/5)
   ✅ Bird rotation (velocity-based lerp)
   ✅ Pipe gradient (linear, 4 stops)
   ✅ Score flash animation (scale pulse)
   ✅ Ground scrolling parallax
   ✅ Mobile touch support

✅ 4. UX
   ✅ Smooth delta-time loop (60fps)
   ✅ Responsive canvas (scales to window)
   ✅ Tab-return dt clamped to max 3
   ✅ Touch preventDefault (no scroll)
   ✅ Keyboard: Space, ArrowUp, W

✅ 5. CODE QUALITY
   Lines: 663
   Structure: organized by STEP comments
   External deps: 0
   Single file: index.html only
   Scope violations: none

## Summary
Total checks: 30/30 ✅
Build time: ~1 session
P0 compliance: 100%
P1 compliance: 100%
Scope boundary: respected
Mobile support: touch + responsive

## Metrics
File: flappy-bird/index.html
Lines: 663 (target: ~500)
JS syntax: valid
External deps: 0
localStorage: flappyHigh key