メインコンテンツへスキップ
  1. 記事/

30日間のバイブコーディング - 1日目 - プラットフォーマー

Nuno Coração
著者
Nuno Coração
Principal Product Manager @ Docker
目次
30 Days of Vibe Coding - この記事は連載の一部です
パート 1: この記事

1日目。AIにゲームを作らせたらどうなるか、試してみよう。

プロンプト
#

こう入力した:

「10ステージのウェブベースのプラットフォーマーを作りたい」

それだけ。それが全てのクリエイティブな指示だった。

どのように構築されたか
#

これはWatchfireを初めて使ったプロジェクトのひとつだ。単一のプロンプトを与えると、作業を21の個別タスクに分解してくれた:

  1. プロジェクトのセットアップとゲームキャンバス
  2. ゲームループとレンダリングを含むゲームエンジンコア
  3. 動きとアニメーションを持つプレイヤーキャラクター
  4. 物理演算と衝突判定
  5. プラットフォームと障害物システム
  6. ローダーとカメラを含むレベルシステム
  7. 簡単なレベル(1〜3)
  8. 危険要素を含む中級レベル(4〜6)
  9. 難しいレベル(7〜10)
  10. UI/HUDシステム
  11. ゲームステートとメニュー
  12. 8ビットサウンドエフェクトと音楽を含むオーディオシステム
  13. 磨き上げ、セーブシステム、タッチコントロール

その後バグ報告が来た:ブラウザ互換性の修正、デプロイ用の再構成、そしてプレイテスト中に見つけたいくつかのゲームプレイのバグ。

ファイルの変更をひとつひとつ承認する必要はなかった。Watchfireがタスクをキューに入れ、順番に処理してくれた。戻ってきたら動くゲームができていて、あとはプレイテストするだけだった。

得られたもの
#

これは予想外だった。

メインメニュー

実際のグラフィックがある。 プレースホルダーの四角形ではない。目のついた小さなキャラクター、異なる色のプラットフォーム、着地時のパーティクルエフェクト。全体的に統一されたビジュアルスタイルがあるが、自分では一切指定していない。

音楽がある。 プレイ中にループする8ビットのBGM。オーディオは頼んでいなかった。勝手に追加してくれた。

レベル1のゲームプレイ

レベルが実際に難しくなっていく。 レベル1は「First Steps」という穏やかなチュートリアル。レベル4になるとスパイクが登場(「Danger Ahead」)。レベル7は「Speed Demon」という名前だ。難易度曲線が存在し、理にかなっている。

危険要素のあるレベル4

完全なメニューシステムがある。 メインメニュー、レベルセレクト、ポーズ画面、ゲームオーバー画面、レベルクリア画面。解除したレベルはどれでも選べる。頼んだものよりはるかに洗練されている。

レベルセレクト

進行状況が保存される。 ブラウザを閉じて後で戻っても、解除したレベルはそのまま残っている。頼んでいないのにlocalStorageによる永続化が実装されていた。

18モジュール。 GameEngine、Player、Physics、Camera、LevelLoader、LevelManager、ParticleSystem、AudioManager、SaveManager、TouchControls……関心の分離を備えた適切なアーキテクチャが構築されていた。各モジュールには明確な責務がある。これも何も指定していない。

バグ報告
#

最初から完璧ではなかった。プレイテストして問題を報告する必要があった:

  • 「青いボックスしか見えない」(ブラウザ互換性の問題、roundRectのポリフィルが必要だった)
  • 「フラッグに到達してもレベルが終わらない」
  • 「次のレベルを始めると右に動き続ける」
  • 「レベルセレクトが常にレベル1を読み込む」
  • 「音楽が単調すぎる」

シンプルな説明文だけ。自分でデバッグは一切せず、見たままを伝えた。修正が返ってきて、うまく動いた。

レベル7

ゲームオーバー

数字
#

  • 18のゲームモジュール(明確な関心の分離)
  • 10ステージ(JSONベースのレベル定義)
  • 約3,500行のバニラJavaScript(ゲーム本体にはフレームワーク不使用)
  • 21のWatchfireタスク(初期セットアップから最終バグ修正まで)
  • 実際の作業時間: プレイテストとバグ報告を合わせて約30分

試してみよう
#

プラットフォーマーをプレイする

矢印キーまたはWASDで移動、スペースキーでジャンプ。モバイルでも動作する。

1日目の評決
#

1文のプロンプト。10ステージ、音楽、メニュー、セーブシステムを備えた完全なゲーム。

これは重要なことだ:ゲームエンジンを書いたのは10年以上前——大学時代が最後だ。衝突判定やレベル進行システムのことはすっかり忘れていた。自分一人ではこれを作れなかっただろう。1日では無理だし、1週間でも難しかったかもしれない。

これは史上最高のプラットフォーマーか?全然そうじゃない。でも存在する。動いている。人々がプレイできる。そして数週間ではなく数時間で完成した。それが変わったことだ。これほど複雑なものを作るコストが劇的に下がった。そして磨き続けたければ、ステージを追加したり、物理演算を改善したりすることもできる。出発点がもはや空白のファイルではなくなった。

これは30のプロジェクト全体を通じてひとつのパターンになると思う。何かの最高バージョンを作るつもりはない。でも以前なら作れなかったものの動作するバージョンを、素早く作り続けていく。


これは30日間のバイブコーディングの1日目です。AIアシストコーディングで30日間に30プロジェクトを出荷する様子をフォローしてください。

30 Days of Vibe Coding - この記事は連載の一部です
パート 1: この記事

関連記事