「AIでブラウザ上で動作するゲームをどこまで作成できるのか？」という問いに挑戦するシリーズの第1回、ファミコンの「スペランカー」を再現する回の続きです。
これまでのシリーズ
AIを使ったゲーム制作：「スペランカー」を再現する①（バイブコーディング）
AIを使ったゲーム制作：「スペランカー」を再現する②（バイブコーディング）
前回の振り返り
前回は小さなコブやゲームオーバー画面を入れることができました。
今回はアイテムの取得、爆弾、扉、ゴールの実装など、一気に進めていきます。
アイテムを追加する
スペランカーのアイテムについて記憶が曖昧だったので、参考サイトを先に探しました。
下記のサイトが見やすかったため、参考にさせていただきました。
https://pidlio.com/spelunker/data/item.html#google_vignette
全部を依頼すると複雑になりすぎるため、まずはコイン、ドル袋、ダイナマイト、鍵だけ依頼します。
マップ上の記号を設定してくれます。
アイテムを取得した際の処理も勝手に加えてくれます。優秀です。
ここで何度かエラーが出ました。
起動しなかったり、うまく動かなかったりしたので、ブラウザの開発者タブに表示されるエラーなどをAIに教えて解決していきます。
AIの特性なのか分かりませんが、以前に修正した部分が巻き戻ったりすることがあるため、何度も同じ修正を指示することがありました
いくつかエラーを解消後、アイテムの取得まで実装しました。
続いて、UIを実装していきます。
UIの実装・調整
スコアのルールと表示を指示します。
あっさりスコアは表示されるようになったんですが、以前に修正した「コブの上に乗ってもミスにならない」問題が再発していました。
アイテムを増やしたことで衝突判定が複雑になっているようです。
何度かやり取りを重ねてもうまく伝わらなかったので、動画で伝えてみました。
ちゃんと動画も読み取ってくれるようです。
動画で伝えたことも良かったのか、コブの問題も解決し、スコアのルールと表示が実装されました。
スコアが表示されるとゲームらしくなってきました。
続いてアイテムに関しても表示するように指示します。
アイテムはすぐに表示されたのですが、文字間隔の調整などを依頼している際に、AIが無反応になることがありました。
リロードをしても無反応だったりしたので、AIに呼びかけると反応を再開してくれました。
コードが長くなってきたからか、もしくは一つのチャット内の情報が多くなってきたのが原因なのか、単純に混雑している時間帯だったのかは分からないですが、同じような事象が何回か発生しました。
アイテムの所持数も表示されるようになりました。
現時点では記号なので、どれがどのアイテムか分かりませんが、後ほど対応します。
残機数ルールの追加、表示
続いて残機数を表示します。
現時点では1度ミスすると即ゲームオーバーになるようになっているため、残機数のルールをまず実装してもらいます。
ここは一発で残機数のルールが実装され、指示していないのに画面上に表示してくれました。
表示する位置の調整やアイコンでの表示を指示します。
表示が左に寄せられました。
続いて爆弾の使用を実装していきます。
爆弾、ゴール地点の実装
まずはざっくり依頼します。
これだけの指示でBキーを押すことでの爆弾の設置に加えて、時間経過後の爆発まで実装することができました。
AIは先読みして実装してくれるのありがたいですね。
点滅してから爆発するなど、本当に細かいところまで実装してくれています。
床まで壊れてしまっていますが、一旦このまま進めます。
続いてゴール地点を作成する。
ここでちょっと表示がおかしくなります。
一旦前のコードに戻してもらいます。
若干、返答がおかしくなっていますが、前のバージョンのコードに戻すことができています。
マップ部分がおかしくなっていたので、マップ部分は手作業で直します。
ここは自分で直す必要が出てきましたが、記号で表示されているものを書き換えるだけなので、難しくはないです。
修正したマップ部分を反映するよう伝えます。
マップの記号がわからなくなった場合も、聞けば教えてくれます。
壊れるかべと、壊れない部分の実装
爆弾で全てが壊れるようになっていたため、壊れる部分と壊れない部分を調整します。
実装してもらいましたが、色の指定がおかしくなっています。
各ブロックの色の修正していきます。
マップ部分は細かい指示が必要なので、また手作業で直して進めます。
鍵の実装
鍵を持っていると扉が消えるようにします。
また、鍵が記号だと分かりづらかったので、PCでも表示できる絵文字「🔑」に変更してもらいます。
鍵を変更するとゲームらしくなってきました。
右下の小さなドットがついたブロックがドアです。（ドットはノブ？）
「OA」と書かれているブロックがゴールです。フォントサイズによってGOALが見切れているようです。
一旦細かいところは後にしてゲーム部分の調整を進めます。
鍵を持ってドアに触れてもドアが消えなかったので、動画を撮って依頼します。
ここで結構つまづいて、４、5回同じ指示を出しました。
なんとか鍵を持った状態で扉に触れると扉が消えるようになりました。
細かい部分の調整
爆弾もアイコン💣に変更します。
また、ステージクリア自体は実装されているものの、フォントが大きかったりリスタートができなかった部分を修正します。
GOALマスのフォントサイズの修正も試みましたが、うまくいかなかったので一旦後にします。
また、何かを修正するたびに「コブの問題」や「扉が開かない問題」が再発生していたので、都度修正していきます。
AIはコードが巻き戻る現象が発生しますね。。
今回のバージョンは下記です。
かなりゲームらしくなってきました。
今回分のコードは下記です。興味あればダウンロードしてみてください。
長くなりましたが、最後まで読んでいただきありがとうございました！
次回はグラフィックの調整、音楽の実装までできたらと考えています。
