AIを使ったゲーム制作：「スペランカー」を再現する⑧（他タイトル画面、完成、公開）

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

これまでのシリーズ
AIを使ったゲーム制作：「スペランカー」を再現する①（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する②（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する③（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する④（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する⑤（BGM、敵キャラの実装）
AIを使ったゲーム制作：「スペランカー」を再現する⑥（コブの調整、間欠泉・リフトの実装）
AIを使ったゲーム制作：「スペランカー」を再現する⑦（キャラクターの調整、ゲームオーバー時のサウンド実装）

本記事では2025年10月時点の「Gemini 2.5Pro」を使用しています。

タイトル画面の実装

タイトル画面の実装ですが、そもそもタイトルが決まっていません。
タイトルもAIに考えてもらいましょう。

カテゴリーに分けて10案以上の案を出してくれました。
案出しに関して本当にAIは優秀です。

何度か案を出してもらって「VIBE DELVER」（バイブ・デルバー）というタイトルにすることにしました。
バイブコーディングのニュアンスを取り入れています。

さて、タイトルができたので、タイトル画面を作成しましょう。

タイトル画面の作成

とりあえず依頼してみます。

ここで「全体を貼り付けてください」と言っています、コードを見るとまた結構端折られています。
変更された関数の中のコードすら省かれているので、注意が必要です。

変更箇所が多かったので、変更箇所を書き出してもらいます。

細かな変更点が6箇所ほど表示されたので、それぞれ修正していきます

全体を直したつもりでしたが、エラーが出て画面が真っ暗になってしましました。
デベロッパー画面に表示されたエラーを読んでもらいます。

「ファイルが途中で終わっている」ということだったので、改めてコードを見てみたら関数を閉じるカッコが閉じられていない箇所がありました。
先ほど細かく修正した時に漏れてしまったようです。
VS Codeを使用しているので、そもそも赤く表示されていました。

カッコを追加すると画面が表示されました。

ちょっと簡素なので、少し色味やデザインを足していきます。

ちょっとよい感じになりました。

少し修正します。

ボーダー柄が追加されました。

イメージとは違いますが、悪くないので進めます。

マップの調整

今のマップは一旦手動で作っているので、なんとかAI化できないか試してみます。
勝手にコードを書き換えられても困るので、これまでの制作とは別の新規チャットで確認します。

一旦それらしく出ます。

マップの意図なんかも教えてくれます。

試してみましたが、諸々問題が出ています。

まず最初のゴンドラが動かないですし、つたやリフトもずれています。
その辺りも含めて調整してもらいます。

作成してもらいましたが、、、全然ダメでした。。

これはダメかもしれないので、今回は一旦諦めます。

最終調整

あとはゲームの細かな部分を調整して完成させます。

ちょっとだけ修正するつもりでしたが、気になると色々直しちゃいますね、、。
本当に何度も何度も巻き戻ったりしたのですが、なんとか修正。

---

完成、itch.ioで公開

ようやくゲームとして一通り遊べる状態になりました！（一面しかないですが、、）

せっかくなので、下記にて公開していますので、ぜひ遊んでみてください。
無料のブラウザゲームなのですぐに遊べますよ。

The Vibe-Delver （itch.io）

ところどころ挙動が怪しいところはありますが、ゲームとして楽しめるくらいにはなっているかと思っています。
２面以降はマップの案があれば作成しようかと考えています。
※上記ページの説明にマップで使用している記号が載っているので、興味ある方は作成案送ってみてください

今回はここまでです。
コードをほぼ理解しないままでなんとか完成まで持ってくることができました。
今後は作成に関するまとめだったりの記事を作成する予定です。

最後までお読みいただき、ありがとうございました！
AIによるコーディングに興味を持った方はぜひ試してみてください。