テトリスからパックマンまで

同じ「ゲームを作る」課題でも、複雑さが変わればアプローチも変わらなければならない。バイブコーディングでテトリスを作ってみて、単一プロンプトでパックマンに失敗した後、企画・開発・QAの3段階マルチエージェントで再挑戦し、その違いを体感する。

プラットフォーム: claude.ai または Claude Code · 所要時間: 40分(テトリス10分 + パックマン25分 + 示唆5分) · 関連: 第2章 §2 単一エージェントの限界

テトリス — バイブコーディングで十分な複雑さ (10分)

第4章の実習では参加者をClaude / Antigravityなど4つのグループに分けるが、このウォームアップでは全員が同じプラットフォーム(claude.ai または Claude Code)を使用する。ハーネスツールの違いではなくアプローチの違いに集中するためである。

進め方

1. 講師デモ(1分): claude.ai(または Claude Code)に次のプロンプトを入力する。

HTML Canvasでテトリスゲームを作って

10~20秒で操作可能なテトリスができあがる。

2. 参加者による実践(5分): 各自が同じプロンプトを入力し、自分のテトリスを作る。
3. 修正依頼(4分): 完成したテトリスに自由に修正を依頼してみる。

背景色を暗い色に変えて
スコアボードを大きくして
次のブロックのプレビューを追加して

パックマン — 複雑さが生んだ限界 (25分)

今度は似ているように見えるが、はるかに複雑なゲームを作ってみる。パックマンはキャラクター移動・幽霊AI・衝突判定・マップ設計・アイテムシステムなど要素がはるかに多く、完成すると~1,000~1,500行に達する。

ステップ1: 失敗体験 (2~3分)

まずテトリスと同じ方法で試してみる。

HTML Canvasでパックマンゲームを作って

キャラクター移動・幽霊AI・衝突判定・マップ設計が同時に一つのプロンプトに詰め込まれると、コードが絡み合い意図通りに動作しない。この「失敗」がこのウォームアップの核心体験である。

ステップ2: マルチエージェントで再挑戦 (各ステップ約7~8分)

今度は一つのエージェントではなく、3つの役割に分けて順次進める。

パックマンゲームの機能リストとマップ構造を仕様書として作成して。次の項目を含めて:
- キャラクター(パックマン、幽霊4種)の動作方式
- マップ構造(壁、ドット、パワーアップの位置)
- ゲームルール(スコア、ライフ、レベル)

以下の仕様書をもとに、HTML Canvasでパックマンゲームのコードを書いて:
[ステップ1の結果をここに貼り付け]

このパックマンゲームコードのバグを見つけて修正して:
[ステップ2の結果をここに貼り付け]
特に次を確認して:
- 壁の衝突判定が正確か
- 幽霊AIがそれぞれ異なるパターンで動くか
- スコアとライフが正しく計算されるか

示唆 — 複雑さが高いほど役割分離の価値は指数関数的に増大する (5分)

テトリスのように単純な作業はバイブコーディング(単一プロンプト)だけで十分である。しかしパックマンのように複雑さが高まると、一つのエージェントにすべての役割を任せることには限界がある。

これが第2章 §2で学んだ単一エージェントの限界を直接体験したものである。コンテキスト過負荷、役割の衝突、抜け漏れ — これらすべての問題が役割を分けることで解決される。

核心メッセージ:

このウォームアップで手動で体験したハンドオフ(企画→開発→QA)を、続く第4章ではClaude Code・Claude Desktop App・Antigravityのサブエージェント機能による自動化された方式でさらに深く体験することになる。

確認質問