AIプログラミング日記：ゲームを仕上げてみた件

ROROSUKE LABO

2025年2月14日 06:37

以前Pythonでインベーダーゲームもどきを作り、さらにそれをAIでJavaScriptに移植したという記事を投稿しておりましたが、今回、さらにこれをDeepSeekとClaudeで完成まで仕上げてみました。

プレイルームはこちら

次が仕上がりバージョンです。本家とはいくつかルールが違いますが、一応の要素は盛り込まれていると思います。下記のリンクをクリックするとブラウザ上でプレイ可能です。なおPC＋マウスでの実行を想定しているので、おそらくスマホでは操作し辛いです。

仕上がりバージョン完成までの工程

まず前回のバージョンはこんな感じでした。

敵が隊列を組んで移動しながら弾を撃ってくる
自機はマウスで左右に移動し、マウスボタンで弾発射
自機弾が敵に当たると弾と敵を消滅し得点追加
敵を全部消滅させたら次ステージに進み、難易度アップ（敵弾数増加）
敵弾が自機に当たると残機数を減らしゼロなら再ゲーム画面

あまりの粗削りな状態なので、何からやろうかという感じです。そこで、DeepSeekに何をしたらいいか質問をしました。

👦このゲームに対して、もっと面白くなるような要素を入れたいので、アイデアを提案してください。

💻このゲームをさらに面白くするために、以下のようなアイデアを提案します。

パワーアップアイテム
ボス戦
敵の種類を増やす
障害物や地形の追加
ミッションやゴールの追加
ストーリーや世界観の追加
マルチプレイヤーモード
難易度調整
エフェクトやアニメーションの追加
サウンドエフェクトとBGM
ランキングシステム
ステージデザインの多様化

なるほどな提案です。

1.弾が当たったときの爆発エフェクト実装

この時点でDeepSeekがどれほどのものか分かりませんし、いきなり複雑なことを依頼しても失敗しそうなので、まず簡単な願いをしてみました。

👦「9.エフェクトやアニメーション」の実装はできますか？

💻爆発エフェクトの追加
インベーダーが倒された時に爆発エフェクトを表示します。

いきなりコードが表示されたので、これを組み込んだところ爆発エフェクトが実装されました。特に、エフェクト内容は指示はしてないので、完全にAI提案による演出となっています。

バリケードの設置

エフェクトがスルッと実装できたので、気をよくして、次にバリケード（障害物）の実装をお願いしてみました。

👦バリケードを実装してください。小さい四角を横五列縦4列の塊にして、画面の自分の砲台より少し上に、左、中央、右に3つ配置してください。自分の弾もしくは敵の弾がバリケードの小さい四角にあたったら、自分の弾、敵の弾は消滅し、当たった小さい四角も消滅してください。

💻了解しました！以下の要件を満たすようにコードを修正します。

バリケードを配置:
- 横5列、縦4列の小さい四角を1つの塊として、画面の砲台より少し上に左、中央、右の3つ配置します。
- 各小さい四角のサイズは 10x10 とします。
バリケードと弾の衝突処理:
- プレイヤーの弾または敵の弾がバリケードの小さい四角に当たると、弾と当たった小さい四角が消滅します

以上で、コードが表示されて実装完了です。

キャラクターをドット絵アニメ

よりゲームとしての完成度を高めるためにキャラクターの作りこみに着手しました。具体的には、敵と自機のデザインです。これはかなりのアップデートになるでしょう。指示方法がわからないので次のプロンプトを入れてみました。

敵の形を四角から、もう少し複雑な形にしたいのですが、指示をどうすればいいですか？
たとえば、
00000000
01111110
10100101
10100101
10100101
10100101
01111110
00000000
のようなドット絵指示で、そのような形を作ってもらったりできますか？

返事が次です。

ドット絵（例: 0 と 1 の配列）を元に、敵の形を描画します。
// 敵のドット絵
const INVADER_SHAPE = [
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 1, 0],
    [1, 0, 1, 0, 0, 1, 0, 1],
    [1, 0, 1, 0, 0, 1, 0, 1],
    [1, 0, 1, 0, 0, 1, 0, 1],
    [1, 0, 1, 0, 0, 1, 0, 1],
    [0, 1, 1, 1, 1, 1, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0]
];

「なるほど。これでいいんだ」と思い、次の指示をしました。

👦敵のデザイン（アニメパターン2つ）を作りました。敵のデザインは移動した量によって切り替えてください。つまり、敵の移動が速くなったら、それに応じてアニメパターンの切り替えも早くなるということです。自機のデザインも作りましたので変更してください。

UFOを追加する

ここまでくると、やっぱりUFOを追加しないと始まらないだろうということで実装することにしました。しかし、このあたりでDeepSeekがサーバー混雑で反応がなくなってきたので、Claudeで続けることしました（Claudeはリソースを使い切ると数時間使えなくなるので、あまり使いたくない）。

👦15秒ごとに、画面の上方の決まった高さに、乱数で左端もしくは右端かを決めて、その場所にUFOを登場させてください。登場したUFOは、左右の反対側に移動して、画面の外に出たら削除してください。 UFOにプレイヤーの弾が当たったら、UFOを消してください。このときスコアに300pt加えてください。また、UFOの位置に「300」と2秒間表示してください。

💻ご要望の修正と機能追加を行います。以下のコードを適切な位置に追加してください。

ちゃんとUFOが登場し、撃ち落とすと300ポイント、スコアに加算されます。これでゲームとしての実装は完了としました。

効果音を付ける

臨場感アップのため効果音を付けることにしました。やり方を聞いてみます。

👦仕上げに音を付けたいのですが可能ですか？

💻はい、音を追加することができます。効果音ファイルは以下のような形式のものを用意する必要があります：

shoot.wav - 短い発射音
invaderkilled.wav - インベーダーの撃破音
ufo_highpitch.wav - UFOのサイレン音
ufo_killed.wav - UFO撃破音
explosion.wav - 自機の爆発音
1up.wav - 1UP効果音

コードが表示されたので、効果音ファイルを用意するだけですね。また、効果音といえば敵の動きに合わせた「ド、ド、ド、ド」という移動音も付けたいところです。

👦敵の動きに合わせて4つの音を順番に鳴らすことは可能ですか？具体的には、ド、シ、ラ、ソといった音の繰り返しになります。敵の動きが速くなると、それに合わせて音を鳴らすタイミングも早くなります。

💻音声ファイル（do.wav, si.wav, la.wav, so.wav）を用意してください。オリジナルのゲームでは電子音が使用されていましたが、同様の効果を得るには単音の電子音のWAVファイルを使用するとよいでしょう。

ぞれぞれの効果音は次のサイトのものを利用させてきただいました。感謝です。

長年の夢が叶いました

そもそもAIによる開発は、粘土細工で形を整えていく感じで、おおざっぱな形を整えるのは比較的簡単ですが、繊細な作りこみとなるとディテールを伝える難しさがあります。その意味では、かなり苦手な工程だと思っておりました。

ですが、実際にやってみると意外となんとかなりました。これらは、DeepSeek、Claudeの能力の高さゆえのものですね。あまりに開発がスムーズに進むので、私自身もうっかり没頭です（笑）。

インベーダーゲームは古典ゲームですが、実は、過去に自作にトライしたとがあります。しかし、そのときは完成には至りませんでした。そして今回、長年の夢が叶いました。まさか、ここまで仕上るとは。

ありがとうAI！！