🎈

VibeCording実践：クレイジーバルーン(ゲーム)

に公開
AI コーディング
開発事例
vibecording
ポートフォリオ作成
ブラウザゲーム開発
tech

1. ゲーム概要

2. 背景

AIコーディングの限界と再現性を検証するため、VibeCordingを用いてゼロから開発することを決定。
評価がつけやすいよう、作成対象はシンプルなゲームとした。
ただし、テトリスは既にAIが大量に生成しており学習済みデータが豊富なため、よりマイナーな題材として、子どもの頃にハマってたアーケードゲーム『クレイジーバルーン』を選択。

3. 開発条件

  • HTML1ファイル構成（index.htmlのみ）
  • 外部ライブラリ不使用(ネイティブJSのみで構成)
  • オリジナル版に似せつつ、権利的に安全な独自要素を追加
  • 軽量・短時間起動

4. 開発プロセス

  • プロンプト方針：
    当初ClaudeCodeに直接「ゲームのクレイジーバルーンを実装して」と指示したところ似ても似つかないものが出来たので、
    事前にChatGPTと対話しゲームルールを細かく仕様化、描画・当たり判定・得点管理など段階的に依頼

  • フロー：
    　1. 設計仕様をAIに渡す
    　2. HTML/JSコードを生成
    　3. ブラウザで動作確認
    　4. バグ修正や難易度調整を繰り返し依頼
    　5. 最終テスト後に完成

5. 成果物の詳細

  • 画面キャプチャ：

  • 主な機能：
    　- 風船を破裂させずに迷路を抜ける
    　- スコア表示

    • 時間制限あり
    • アナログステック
      　- 難易度別ステージ

  • 工夫点：
    　- 当たり判定ロジックを軽量化
    　- キー操作レスポンスを改善し、遅延を最小化

    • 操作時の画面スクロール抑止
    • アナログステック採用により鬼畜仕様に😏

6. VibeCordingのメリット

  • ゲームループや当たり判定などの複雑処理も短時間で形になる
  • 思いつきの仕様変更に即対応可能
  • 手戻りコストがほぼゼロ
  • アナログコントローラーの実装など難しいものも意外と簡単に実装してくれる
  • CI/CD実装も簡単

7. VibeCordingの課題

  • 細かい演出、知らない演出はプロンプトだけでは再現度が低い
  • 実装の最適化（リファクタリング）は人間側で補う必要がある
  • デバッグ精度は環境依存
  • ブレるズレるためTDDやUnit、E2Eテストなどでの補正が必要
  • コーディングについては中～大規模になると範囲を絞って指示する必要があるだろう(おそらく)

8. 得られた学び

  • ゲームルールの仕様化を事前にしっかりやるほど、AIの出力が安定する
  • 既存ゲームの再現は法的配慮と独自アレンジが必須
  • VibeCordingは短期プロトタイプやネタ系開発と相性が良い
  • ネイティブJSでのアナログステック実装方法について大変勉強になった

9. まとめ

VibeCordingを使えば、懐かしのゲームも短時間で形にできることが分かった。
クライアント案件のプロトタイプや、個人ポートフォリオのネタ作りにおいても十分に戦える手法だと実感。
「AIと一緒に作る開発体験」を広く知ってもらいたい。

10. 最後に

なんか仕事下さい😅

Discussion