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

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

これまでのシリーズ
AIを使ったゲーム制作：「スペランカー」を再現する①（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する②（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する③（バイブコーディング）

前回からの続き、アイテムのアイコン表示

アイテムを画像で表示していきます。

表示されました

マップが前のバージョンに戻っています。
AIで作成する場合、なぜかわかりませんが、前のバージョンに一部巻き戻る場合があります。
何度も同じ修正を実施してもらうことがありました。
コードの他の部分が変わってしまうため、コードの一部分を修正していく使い方が本来は望ましいのかもしれません。

AIモデルの切り替え

ここで問題が発生。「エラーが発生しました」と表示されました。
リフレッシュしたり、時間をおいたりしても改善しないため、新規のチャットでやり直すことにします。

また、AIにはモデルがあり、切り替えることができるため、このタイミングで「2.5 Flash」から「2.5 Pro」に切り替えます。

「2.5 Pro」の方がコードの生成には向いてそうな感じです。
AIのモデルはちょくちょく新しいのが出るので、更新されていないか確認しましょう。

改めて「2.5 Pro」でチャットを作成し直し、ゲームを作成中であることを伝えます。

基本的な構造やコードも提示してくれます。
一旦これまでのコードを貼り付けます。

これまで実装された機能を褒めてくれます。
AIはちょくちょく褒めてくれるのが嬉しくて励みになります。

キャラクターの作成、アニメーションの追加

ここからキャラクターのアニメーション表示を実装します。

ここで結構時間がかかりました…。
長いやり取りが続いたので、詳細は省いて状況だけ書きます。

そして、最終的にできたのがこのキャラクター。

横向きで作成してもらいたかったところですが、ちゃんとヘルメットらしきものも被ってるし、アニメーションもするのでこちらで進めます。

キャラクターを変更したことで、ハシゴから降りた時に床をすり抜ける問題が発生しましたが、すぐに修正できました。
キャラクター作成時の問題発生した際に、VS Codeというツールを使用していたので、コードの修正・確認もやりやすくなりました。

ハシゴとツタを追加

ハシゴのグラフィックを変更します。

スペランカーにはツタもあったことを思い出して、ツタも追加しました。
マップ部分は手で修正しました。
かなりゲームぽくなってきたのではないでしょうか。

左上のキャラクターアイコンを現在のキャラクターの顔にしてもらいます。
その際にアイコンと数字がずれていたので、細かく調整していきました。

なるべく直接コードを修正しないようにしているため、７・８往復したところでなんとか程々の感じに調整できました。

次はスペランカーでも実装されていた「ゴンドラ」を実装していきます。

ゴンドラを作成する

とりあえず作成してもらったのですが、位置を指定してなかったので、マップのど真ん中に作成されました。
でも、乗った状態で上下に動かすことができます。すごいですね！

位置やグラフィックを調整します。

良い感じになりましたが、プレイヤーが動かなくなりました。
ブラウザのコンソールにエラーが表示されたので、伝えます。
※コンソールのエラー確認方法はGeminiに教えてもらいました。

位置を調整して、ワイヤーもつけてもらいました。
かなりそれっぽい感じになりました！

ミスした時のフリーズ➕点滅を追加

ミスした時にその場で点滅するよう指示します。

AIはちょくちょく英語で返してくる時がありますが、日本語にするように指示すれば問題ないです。
キャラクターが点滅とは書いていないですが、ちゃんとキャラクターが点滅するようにしてくれました。優秀です。
点滅のスピードやゲームオーバーの場合はゲームオーバー画面と同時に出るように調整を依頼します。

何度か調節し、想定通りの挙動になりました。
ハシゴのグラフィックもちょっと調整しました。

今回はここまでとします。
キャラクターやハシゴ・つた・ゴンドラが表示されたことでかなりゲームぽくなってきました。

今回分のコードは下記です。興味あればダウンロードしてみてください。

長くなりましたが、最後まで読んでいただきありがとうございました！
次回は音楽や敵の実装とスクロールまでできたらと考えています。