「AIでブラウザ上で動作するゲームをどこまで作成できるのか？」という問いに挑戦するシリーズの第1回、ファミコンの「スペランカー」を再現する回の続きです。
これまでのシリーズ
AIを使ったゲーム制作：「スペランカー」を再現する①（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する②（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する③（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する④（バイブコーディング）
本記事では2025年9月時点の「Gemini 2.5Pro」を使用しています。
BGMの実装
とりあえずざっくりBGMが実装できないか聞いてみます。
音声ファイルを用意することが必要なようです。
一旦Gemini側で用意、もしくはスクリプトで鳴らせないか聞いてみます。
スクリプトだけで対応できそうなので、進めます。
SE（効果音）は実装できました。
BGMの作成はかなり難しいようです。
BGMをスクリプトで生成するのは諦めて、音楽生成AIサービスであるSUNOを使用することにします。
SUNOで生成するためにもスクリプトが必要なので、スクリプトはGeminiに考えてもらいました。
下記のプロンプトが生成されました。
8-bit chiptune, Famicom game music, BGM for a cave exploration game, adventurous and slightly quirky, catchy square wave melody, simple triangle wave bassline, instrumental, seamless loop
こちらをSUNOに入力して生成するとあっという間にBGMが生成されます。
スペランカーぽい、ノリの良い楽曲が生成されたので今回はそのまま使用することにします。
問題なく実装されました。
raku
すごく良い感じの曲ですよね。AIの進歩は素晴らしいです
敵の実装（コウモリ、ゴースト）
スペランカーの敵といえば「コウモリ」ですよね。何度あの糞にやられたかわかりません。
実装していきます。（といっても指示を出すだけですが）
英語で返してくれましたが、気にせず進めます。
AIはコードの一部分を修正するように依頼してくることがあります。
（下記ではenemyオブジェクトをplayerの辺りに記載しろといっています。)
(★マーク部分を加えろという指示です）
知識があるのであれば、指示された部分を修正していっても問題ないです。
コードが崩れてしまうこともあるため、不安であれば「コード全体」を改めてもらうようにしてもらうと良いでしょう。
現時点でコードの行数が700行程度ですが、全体をもらって貼り付けてしまいましょう。
良い感じにコウモリが実装されました。
あれだけの指示でここまで実装できるのは本当に素晴らしいです
続いて、フラッシュを持っている場合にコウモリを倒せるようにします。
実装のステップも教えてくれます。
自分でコードを考えるわけではないですが、参考になります。
今回も一発で問題なく実装されました。
フラッシュ（🔺）を取った後、Fキーを押すと上に発射し、コウモリを倒すことができます。
敵が実装されると一気にゲーム性が増しますね。
ゴーストの実装
続いてスペランカーといえばやっぱり「ゴースト」も必要でしょう。
そんなに強いわけではないですが、繊細な操作をしている時に対応を求められるので焦ってミスすることも多かったです。
先ほどと同じようにゴーストの実装を依頼します。
また実装のステップも書き出してくれます。
こちらから指定していない効果音まで勝手に付けてくれました。
今回もコード全体を貼り付け直して起動します。
すんなりゴーストも実装されました。グラフィックやサウンドは簡素ですがまた後ほど調整します。
1回ミスになった後もゴーストが残り続けているため、1回ミスしたらゴーストが消えるように指示します。
ちょっとコードを追記するだけで修正されました。
raku
ちゃんとゴーストが半透明になっている辺り細かいですね
スクロールの実装
現在は１画面で完結しているため、探索感を増すために縦にマップを伸ばしていきます。
英語で返答されましたが、日本語にしてほしい旨とコード全体がほしい旨を伝えました。
起動したところ動かなくなったので、コードを見てみると「unchanged」と書かれた部分が端折られているぽかったので、再度コード全体をもらうように依頼します。
改めてコード全体を表示し、今度は動くようになりました。
しっかりスクロールするようになりました。素晴らしいです。
ただ、マップのつながってないので、修正を依頼します。
マップ部分だけを修正してもらいましたが、下記のようによくわからないマップになってしまいました。
この辺はAIの苦手な部分なのかもしれません。
マップは手書きで直すことにします。
マップに使われている文字の意味を改めて書き出してもらいます。
raku
ドル袋（D）がアイドルと表現されているのは謎ですね、、
これを参考にコードのマップ部分を修正していきます。
これがどういうことなのか、わからなかったので聞いてみます。
簡単にするとカンマ「,」で次の列に行くので、マップの表示は下記の流れのようです。（矢印わかりづらくてすみません、、）
ちょっとわかりづらいのでカンマ（,）で改行して整えます。
改行するとマップらしくなりました。
raku
ここはちょっと手作業が必要な部分ですね
マップを修正し、下に降りれるようになりましたが、次の画面に切り替わる際にミス扱いになってしまいます。
判定がおかしいと思うので直してもらいます。
その前にマップを修正したことを伝えます。
マップ部分を含めて最新のコードをアップデートしてくれました。
続いて、下の方に行くとミスになってしまうことを伝えます。
今回は1行だけの修正だったので、該当箇所を探して修正しました。
これでスクロールして下方向に進んでいけるようになりました！
マップ構造など、まだ改善が必要なポイントはありますが、ゲームの形としてはほぼ完成形になってきました。
今回分のコードは下記です。興味あればダウンロードしてみてください。
今回も長くなりましたが、最後まで読んでいただきありがとうございました！
次回はグラフィックやマップの微調整、タイトル画面を作成てゲームを完成させる予定です。