5日目。またもやアーケードの名作。今回はBreakoutを作ってみたらどうなるかを試したかった。
プロンプト#
「複数レベル、パワーアップ、コンボスコア、スムーズな物理演算を備えたBreakout/Arkanoidスタイルのアーケードゲームを作りたい」
これまでのプロンプトよりも少し具体的にした。5日目ともなると、最初から欲しい機能を少し意図的に指定しておくと、後でバグ報告をする手間が省けることを学んでいた。
作り方#
今回も Watchfire を使った。package.json を見ればわかる通り、watchfire-0000 というプレフィックスで自動的に名前が付けられている。プロンプトを入力すれば、あとは全部やってくれる。ゲーム全体はHTML5 Canvasをラップした単一のReactコンポーネントに収まっており、このデイリービルドで何度か見かけるパターンだ。最もクリーンなアーキテクチャではないが、動くし、リリースできる。
技術スタックはNext.jsとTypeScript、Tailwind CSS。ゲームのレンダリングはすべてCanvasベースで、メニューやポーズ画面のオーバーレイUIはReactが担当している。
出来上がったもの#
予想以上に完成度の高い、完全にプレイ可能なBreakoutクローンができた。
ユニークなパターンを持つ5つのレベル。 「The Beginning」は標準的なフルグリッド。「Diamond Formation」はブリックをダイヤモンド形に配置。「Fortress」は隙間のある壁を構築。「Waves」は行を交互に配置。「Final Challenge」は密集した層状パターン。各レベルでボールのスピード倍率が上がり、1.0xから1.5xまで増加する。
パワーアップが実際に重要な意味を持つ。 壊れたブリックから4種類がドロップする：ワイドパドル（10秒）、スローボール（8秒）、マルチボール（失うまで複数のボールに分裂）、エクストラライフ（即時）。特別な「スーパー」ブリックはドロップ確率が2倍。パワーアップは光るオーブとして落下してくるので、パドルで受け取る。
コンボシステムが深みを加える。 連続ヒットでスコア倍率が最大3倍まで積み上がる。コンボはヒットがない状態が2秒続くと減衰するため、ボールを素早く動かし続けてブリックに連続でヒットさせる動機づけになる。細かい要素だが、プレイスタイルが変わる。
いたるところにビジュアルエフェクト。 ブリックが壊れるときのパーティクル爆発。ボールトレイルエフェクト。特定のヒット時のスクリーンシェイク。フラッシュエフェクト。きらめくスターフィールド背景。ブリックはホットピンク、オレンジ、イエロー、グリーン、シアンの行による蛍光グラデントカラースキームを持つ。Breakoutゲームとして必ずしも必要なものではないが、全体に生き生きとした感触を与えてくれる。
3種類のブリック。 通常ブリックは1ヒットで壊れる。強いブリックは複数ヒット必要（HP表示あり）。スーパーブリックはさらに頑丈でパワーアップのドロップ確率が高い。レベルパターンはこれらの種類を混在させて異なる難しさを生み出している。
バグ報告#
正直なところ、このビルドはかなりクリーンだった。物理演算は最初から感触が良く、パドルの動きはマウスとキーボードの両方でスムーズで、レベルも正常にロードされた。このビルドで報告すべき大きなバグはなし。
数字で見ると#
- 5レベル ユニークなブリックパターンと難易度上昇
- 4種類のパワーアップ タイマー付き
- TypeScript約2,300行 単一のゲームコンポーネント
- 3種類のブリック（ノーマル、ストロング、スーパー）
- 3つの操作方法： キーボード、マウス、タッチ
試してみる#
マウスまたは矢印キーでパドルを動かす。スペースまたはクリックでボールを発射。PまたはEscapeでポーズ。
5日目の評価#
5日間続けて、パターンが見えてきた。これらのCanvasベースのゲームはAI支援コーディングの得意分野だ。スコープが明確で、ルールが明確に定義されており、動作を確認する即座の手段がある：実際にプレイするだけでいい。
ここで驚いたのはパーティクルシステムとビジュアルの完成度だった。スクリーンシェイクやボールトレイルやスターフィールド背景は頼んでいない。AIがそれらがあるとゲームの感触が良くなると判断し、その通りだった。コンボシステムも良い演出だった。シンプルな「ボールを弾いてブリックを壊す」ゲームを、角度とタイミングを実際に考えるゲームに変えてくれる。
本物のArkanoidと競えるか？それはない。でも複数のレベル、パワーアップ、そして実際にレベルをリプレイしたくなるスコアリングシステムを備えた完全なゲームだ。単一のプロンプトから、1日で完成した。
これは30 Days of Vibe Codingの5日目です。AI支援コーディングで30日間に30プロジェクトをリリースしていく様子をフォローしてください。
