AIを使ったゲーム制作：「スペランカー」を再現する②（バイブコーディング）

「AIでブラウザ上で動作するゲームをどこまで作成できるのか？」という問いに挑戦するシリーズの第1回、ファミコンの「スペランカー」を再現しようの続きです。

前回はこちら→AIを使ったゲーム制作：第1回「スペランカー」を再現する①（バイブコーディング）

前回の振り返り

前回はAIへの指示＋手動のマップ調整である程度ゲームらしい画面を作ることができました。

今回は、スペランカーの特徴である「小さなコブ」やゲームオーバー画面などを追加していきます。

AIによるゲーム制作「スペランカー」②

「小さなコブ」を加えて欲しい旨をAIに伝えます。

なかなか「小さな山形の障害物」を理解してもらうことができません。

なかなか言葉だけで伝えるのは難しいので、参考画像を読み込ませます。
AIでは例があった方が格段に正解率が上がります。

何回か画像を読み込ませていると「画像読み込みの回数制限に達した」旨の表示が出ました。
Chat GPTなどのAIサービスでは、画像の読み込み回数に制限が掛かっています（2025年8月現在）。
5時間に10回など、制限が掛かっているので制限に掛かった場合は時間を置くか、有料サービスへの移行を検討しましょう。

筆者はGeminiの有料サービスに加入していたため、ここからはGeminiに移行して作成を続けます。

エラー（不具合）が発生…！でもAIと一緒に焦らずに対応

Geminiでも同様に指示を出していくと、今後は動かなくなりました。
ゲームが動かなくなるなどの不具合を解消（デバッグ）することは、プログラミングにおいて最も重い部分ですが、ここもAIに助けてもらいます。

「ブラウザの開発者ツール」がわからない場合もAIにどんどん聞いていきましょう。
AIはどんなことでも、何度聞いても丁寧に答えてくれます！

何度かやり取りを繰り返してエラーを解消することができました。
同様に「ハシゴに引っかかる」、「落下死した場合にループになってしまう」「マップの下が見切れてしまう」など問題が発生していましたが、それぞれAIにコードを修正してもらいます。

色々と修正が終わったので、ようやく「コブ」の追加を再開します。

「小さなコブ」の追加

今回はそれらしい「コブ」がマップに配置されました（位置がおかしいので後ほど修正します）

コブの上に乗るとゲームオーバーになるようにします。

コブの当たり判定が厳しかったので、修正していきます。

当たり判定についてもなかなか伝わりづらいので、画像で説明します。

「コブの上の空中に立ってしまう」問題などもあったため、一つずつ修正していきます。

良い感じになってきました。

不具合修正（ゲームオーバー後にずっと動き続ける）

続いて、ゲームオーバー後に入力が残ってしまっている現象が発生していたので、修正してもらいます。

ちなみに、何か修正などの要求を出した際にAIは毎回「問題点」や「修正方法」を詳しく説明してくれます。
特に読まなくても問題ないですが、興味がある部分だけ読むようにすれば良いでしょう。

ゲームオーバー後に動きが止まらない問題は解決されました！

ゲームオーバー時の表示が味気ないので、ゲームオーバー画面を作成します。

ゲームオーバー画面の作成

AIにゲームオーバー画面の作成指示を出します。

今回は1回目でそれらしい画面ができました！
AIは素晴らしいですね。

フォントを変更するように依頼します。

良い感じのゲームオーバー画面が表示されました！

今回はここまでとします。
今回分までのコードは下記に貼り付けておくので、興味あればダウンロードしてみてください。

最後まで読んでいただきありがとうございました！
次回はアイテムの取得、スコアやクリアについても実装していきたいと思います。