AIで遊んでみよう！ バイブコーディング STGを作ろう編
今回WEBブラウザで遊べるシューティングゲームをサクッと作ってみました。
実際に遊べるリンク
https://test.aisgm.me/test_prog/js/001/
PCでしか動かせません。
操作は
WASD か カーソルキーの上下左右
それでは、制作過程を見ていきましょう！
前提条件
注意
PCで動かす事を前提にしているので、スマホでは動作しません。
操作は
WASD か カーソルキーの上下左右
Claude4 Sonnetを使用しました。
HTMLとCSSとJavaScriptを使用して作ったのでブラウザで動きます。
縦スクロースのシューティングゲームをHTML、JavaScript、CSS、を利用して作成してください。
以下の条件でお願いします。
・自機は前後左右に動かす事ができ、画面外へ出る事ができません。
・自機の耐久度は３でレベルアップすると、減っていても３へ回復します。
・自機は敵の弾に当たると自機の耐久度が減り０になると磁気が破壊されゲームーバーとなります。
・自機は上方弾を発射する事ができます。発射速度は０.５秒に１発自動で発射されます。
・自機の弾は上方へ向かって移動します。
・敵は１秒に一回抽選を行い１０％の確率で出現し、２０秒毎に出現確率が１％上昇します。
・敵の初期耐久度は１で、敵の耐久度は経過時間１０秒毎に１上昇します。
・敵は自機の弾が当たると自機の攻撃力分耐久度を減らします。
・敵の耐久度が０になると敵は破壊され初期耐久度をスコアとしてスコアを加算します。
・敵は１分毎に新しい敵に切り替わります。
・３分でボスが出現し、倒すとステージクリア
・ボスは通常の敵の１０倍の耐久力があり、攻撃方法は５秒ごとに切り替えます。
・敵を倒すと敵の耐久値が経験値として加算され、自分のレベル自分のレベル１０を超えると自機がレベルアップします。
・自機がレベルアップすると、パワーアップできて、その種類を選択するメニューが表示されます。
・パワーアップの種類は、自機の攻撃力アップ、スピードアップ、連射速度アップ、弾のサイズアップの４種類です。
・自機のパワーアップが選択されると、選択された内容によって以下の変化が自機に対して行われます。
・パワーアップは以下の種類があります。
・攻撃力アップ 自機の弾の攻撃力が１上昇します。
・スピードアップ 自機の移動速度が１０％上昇します。
・連射速度アップ 自機の弾を発射する速度が１０％早くなります。
・弾のサイズアップ 自機の弾のサイズと当たり判定が１０％上昇します。
・自機の弾の速度が２０％上昇します
・敵の移動は以下の種類があります
・直線的に移動
・自機を向かって移動
・自機と一定の距離を維持する
・ジグザグに移動する
・敵が弾を撃つ種類は以下があります
・自機へ向かって直線的な弾を撃つ
・自機へ向かって３方向へ弾を同時に撃つ
・真下へ弾を撃つ
・自機が動きそうな先を狙って弾を撃つ
以上のようなプロンプトで最初AIに依頼して作成しました。
その後、バランスやもう少し面白くするために指示を与えて、内容を変更していきました。
過程を全て記載すると長くなるので、一部だけ抜粋します
例えば、自機がやられた時に無敵になる機能を追加した時
・自機がダメージを受けたら、耐久力を減らすと同時に１秒間ダメージを受けない無敵時間を作ってください。
・無敵時間中は、ユーザーが分かるように自機を点滅させてください。無敵時間が終わったら点滅は終了し通常の表示に戻ります。
バランスを調整する時
・敵の出現確率が２０秒毎に１％上昇を２０秒毎に５％上昇に変更してください。
・敵の耐久度は経過時間３０秒毎に１上昇へ変更してください。
・敵が破壊された時に、破壊エフェクトを出してください
・敵の移動速度を３０％遅くしてください
・ステージクリア後は、自機のパワーアップと敵のを維持して次のステージへ進めるようにしてください
・ステージクリア後は敵の移動速度を１０％速くしてください
このように、テストプレイしてこう直したら「遊びやすくなるかも！」と思った部分を遊びながらメモっといて、AIに指示するとほぼうまく反映されます。
変な風に修正されたり、誤解する事もあるので、明確に数値で指定（○○％増やすとか１上昇とか３０秒後みたいに）すると、間違いは発生しにくいです。
このような流れを繰り返して、制作していく感じです。
流れを見て分かるとおり、こんなゲームを作りたいとか、明確な目的意識があると作りやすいのかなと思います。
AIへの指示がざっくりしていると、完成品も微妙な感じになったり、思った物と違う（思っていたより良い物ができる時もあるｗ）って事は多いので、人間のコミュニケーションに似ているかなと思ったりしました。
