AIでゲームは作れるか？Geminiと24時間で『落ち物ゲーム』のプロトタイプ「TuntuntunCatch」を開発した全記録

Geminiと24時間でゲーム開発

「生成AIは本当に実用的なコードを書けるのか？」「AIだけでゲーム開発は可能なのか？」
昨今のAI技術の進化に伴い、多くの開発者がこのような疑問を抱いています。本記事では、その疑問に答えるべく、Googleの生成AI「Gemini」を相棒に、24時間という制限時間内でゼロからHTMLの「落ち物ゲーム」のプロトタイプ開発に挑戦した全プロセスを記録します。

この記事でご紹介するのは、全てのプロジェクトの原型となった、最初のゲーム『TuntuntunCatch (TypeA1)』の開発ストーリーです。

挑戦の概要：24時間AIプロトタイピング

今回の挑戦では、以下のルールを設定しました。

コンセプトは「上から落ちてくるアイテムをキャッチしてスコアを競う」。これをベースに、どこまでAIの力で「遊べるプロトタイプ」に近づけるかを検証します。

開発のキックオフ：AIへの最初の指示

何事も最初はシンプルです。壮大な計画書を用意するのではなく、まずはGeminiにゲームの核となる指示から投げてみました。これが、すべての始まりとなったプロンプトです。

HTMLで簡単な「落ち物ゲーム」を作ってください。
上からアイテムがランダムに落ちてきて、プレイヤーはそれを左右に動いてキャッチします。
加点アイテムと減点アイテムが存在するようにしてください。
まずはベースとなるHTML、CSS、JavaScriptのコードを生成してください。

この段階では、詳細なデザインや効果音などは指定しませんでした。まずAIに最低限の土台を作らせ、そこから対話を通じて調整していくアプローチを選択しました。

Geminiとの対話的開発プロセス

実際の開発は、単純な一問一答では終わりません。人間とAIが対話しながら、徐々にゲームを形作っていくプロセスが続きます。

1. 要件の明確化

ベースコードが生成された後、「プレイヤーの移動をキーボードの左右矢印キーで行う」「アイテムの落下速度を徐々に上げる」といった、より具体的な要件を追加していきました。

2. テストとデバッグの反復ループ

AIが生成したコードは、必ずしも完璧ではありません。実装とテストを繰り返す中で、数多くのエラーに遭遇しました。ここが、AIとの共同作業における最も重要なフェーズです。

具体的なデバッグの流れは以下の通りです。

この「テスト→エラー発見→AIに修正指示」という反復ループこそが、AIをパートナーとした開発の中核をなします。AIは文脈を理解するため、エラーコードをそのまま渡すだけで、多くの場合適切な修正案を提示してくれました。

完成したプロトタイプ「TuntuntunCatch (TypeA1)」の概要

24時間の対話とデバッグの末、ゲームの核となる部分を実装したプロトタイプ「TuntuntunCatch (TypeA1)」が完成しました。

まさに「プロトタイプ」ですが、「ゲームとして成立する最低限のサイクル」は確かに実装されており、これはAIとの共同作業における大きな成果と言えます。

AIとのゲーム開発で得られた知見と今後の展望

今回の挑戦を通じて、AIとのゲーム開発に関するいくつかの重要な知見が得られました。

• 驚異的なプロトタイピング速度：アイデアを即座にコード化できるため、開発の初速は圧倒的に速い。
• 定型コードの自動化：HTMLの骨格やCanvasのセットアップなど、定型的なコードの記述から解放される。
• エラー修正能力の高さ：エラーメッセージを渡すことで、人間が見落としがちな構文ミスなどを瞬時に特定・修正してくれる。
• 開発者の役割の変化：コードを「書く」作業から、AIに「指示し、レビューする」という、より上流の工程に集中できる。

AIは万能の魔法使いではなく、非常に優秀な「アシスタント」または「ペアプログラマー」と捉えるのが現時点での最適解でしょう。

AIゲーム開発を効率化するアイデア

• 出力の制御：コードの出力方法が変更点の一部の場合や変更していないファイル含め全てを出力する事があるので、こちらでその指示を含めた方が効率が良いと感じた。例 「今回はコードの出力不要、内部で変更を保存して」等
• 変更は小出しに：ついつい一気にまとめて修正案を提示したくなる所ですがエラーや内部構造がまるっきり違うコードが出力されたりします。面倒でも変更点はなるべく１つ１つ指示する方が安定していると感じた。
• 動作確認は複数で：公開先のサーバーやWordpress環境が整っている場合FTPやサーバーのファイルマネージャー機能で都度アップロードしスマホからの表示や挙動も確認しておいた方が問題に早く気がつけるのでお勧めです。
• 出力がだんだん重くなる：同じ会話内で修正を繰り返すと段々動作が重くなり結果も不安定になってきます。そんな時は新規で会話を作成し生成されたファイルを会話にアップロードすると動きがスムーズになりました。

エックスサーバーとWordpressの場合のアップロード方法

※私の環境でのアップデート手順です。ご自身の環境に置き換えられる部分があれば都度置き換えて実践してみてください。

まずエックスサーバーにログインしファイルマネージャーに移動、”対象のドメイン名”をクリックし内部へ進み”public_html”→”wp-content”→”public_html”→”uploads”→”2025″の辺りで新規フォルダ作成しゲームのファイルをアップロード（私の場合:index.htmlとstyle.cssとgame.jsとconfig.js）

画像や音声ファイルはWordpressのメディアライブラリへアップロードしておきURLを取得しGeminiにそのURLを伝えれば画像や音声として使えます。ゲームのファイルにはJavascriptが含まれてためセキュリティ上Wordpressからのアップロードは諦めた方が良さそうです。

この方法だと１つのゲームは非常に軽量化され画像や音声を入れ替えたり再利用するのも楽になります。

WordPress記事でゲームを動かす方法

最後にWordpressでゲームを動かす方法です。カスタムHTMLパーツを挿入し以下のように入力すると完了です。