Claude Codeに、弾が当たったときの粒と画面の揺れを作らせる頼み方【AIでゲーム開発】

Claude Code に頼んだ文

空の作業フォルダを1つ決め、Claude Code に次の文を1回だけ渡しました。ゲームの中身は、矢印キーで自機を動かしスペースキーで弾を撃つ簡単な弾よけ・シューティングの仕組みにして、弾が敵に当たったときの粒と画面の揺れ、切り替えのキーを1文で頼んでいます。

作業フォルダは C:\games\my-game\ だけです。このフォルダの外は読まない・書かないでください。

HTML ファイル1つ（game.htm）で、ブラウザで動く小さなゲームを作ってください。
画面の下にいる自機（四角）を左右の矢印キーで動かし、スペースキーで上に弾を撃ちます。上のほうを敵（四角）が左右に動いていて、弾が当たると敵が消えてスコアが1増え、少しして新しい敵が出ます。
弾が敵に当たったとき、当たった場所から小さな粒（パーティクル）が四方に飛び散り、だんだん薄くなって消えるようにしてください。
あわせて、当たった瞬間に画面全体を短い時間だけ揺らしてください。揺れはすぐに小さくなって止まるようにしてください。
1 キーで粒のあり・なし、2 キーで画面の揺れのあり・なしを切り替えられるようにし、いまの設定を画面の左上にスコアと一緒に出してください。
作り終えたら、粒と画面の揺れをそれぞれどう作ったかを、ふつうの言葉で説明してください。

※ このページの枠の中の作業フォルダの道は、例の道（C:\games\ の下）に置き換えて載せています。ほかの文字はそのままです。

Claude Code は HTML ファイルを1つ作り、動きを次のように説明しました。

粒については、弾が当たった位置を中心に、小さな点を16個まとめて生み出し、それぞれ円のまわりのばらばらな向きへ、ばらばらな速さで飛ばす作りだと説明しました。点は毎フレーム少しずつ動き、速さ自体も少しずつ落ち、決めた残り時間を毎フレーム減らして0になったら消えます。描くときは、残り時間を最初の時間で割った割合をそのまま透明さに使うので、時間が減るほど自然に薄くなり、消える直前には見えなくなる、とのことです。1キーで切ると、新しく点を生む処理だけが止まり、すでに飛んでいる点は最後まで飛び続ける、とも説明しました。

画面の揺れについては、揺れの強さを表す数値を1つ持たせ、ふだんは0にしておき、当たった瞬間だけ大きな値にする作りだと説明しました。毎回の描き直しで、その強さの範囲でランダムに決めた分だけ画面全体の描く位置をずらし、スコアと設定の文字だけは、ずらした分を戻してから描くので、揺れの影響を受けない、とのことです。揺れの強さ自体は毎フレーム少しずつ小さくなるように計算しているので、当たった直後は大きく揺れても、すぐに揺れ幅が小さくなって止まる、と説明しました。2キーで切ると、当たった瞬間に強さを大きくする処理を止め、そのときの強さもすぐに0に戻す、とのことです。

Claude Code は、埋め込んだ JavaScript を取り出して構文の検査だけを行い、本物のブラウザでは確かめていない、と自分で書いています。★この説明は Claude Code 自身の説明で、次の「粒と画面の揺れが頼んだとおりに動くかを確かめる」で示す試しで確かめたものではありません。

粒と画面の揺れが頼んだとおりに動くかを確かめる

そこで、画面を持たないブラウザで game.htm をファイルのまま開き、自機を敵の下へ矢印キーで寄せながらスペースキーで弾を撃ち、当たった前後の canvas の画素を読み続けました。自機・敵・弾の色の画素から見た目の位置を、それ以外の「赤みが緑みより強く、緑みが青みより強く、黒ではない」画素の数から粒の見た目の量を数えています。当たった瞬間は、敵の色の画素が0になったこと（当たり判定）で見分け、そこから0.1秒ほど（スクリーンショットを1枚撮る時間分）してから、粒の色の画素数と自機の見た目の位置を45ミリ秒おきに読み直す測りを始めました。以下の秒数は、この測り始めからの経過時間です。連射しながら試したため、当たった直後もまだ飛んでいた別の弾が、出直した敵にもう一度当たり、測りの途中でスコアが1つ余分に増えることがありました。

4回とも、測り始める直前（当たったのを見つけて0.1秒ほどのところ）に撮ったスクリーンショットの左上には、そのとき押していたキーどおりの「粒(1)」「揺れ(2)」の ON・OFF が出ていました。

この試しのあいだ、コンソールに出たエラー・例外は0件でした。自機を弾よけ・シューティングとして自由に動かして遊ぶこと自体は、この試しでは確かめていません。

粒が消えるまでの仕組み

game.htm を読むと、粒は当たった1点から16個まとめて生まれ、それぞれ円のまわりのばらばらな向きへ、ばらばらな速さで動き出す作りでした。動くたびに速さ自体も少しずつ落ち、粒ごとに持たせた残り時間（生まれた時点で30〜40のあいだのランダムな値）を毎回1ずつ減らし、0になった粒は取り除かれます。描くときの薄さは、その残り時間を、粒の種類によらずどの粒でも同じ決まった数（40）で割った割合をそのまま使っており、0が透明・1が不透明を表す canvas の透明さの数値と同じしくみです（生まれた時点の残り時間が40より小さい粒は、最初から少し透けて見えます）。この割合は残り時間が減るほど小さくなるので、時間が経つほど薄く描かれ、0になった瞬間に描かれなくなります。1キーで OFF にすると、新しく粒を生む処理だけが呼ばれなくなり、すでに生まれている粒はこの仕組みのまま最後まで動いて消えます。

画面の揺れが収まる仕組み

画面の揺れは、揺れの強さを表す数値を1つだけ持たせ、ふだんは0にしておく作りでした。弾が当たった瞬間にこの数値を決まった大きさにし、毎回の描き直しのたびに、その大きさの範囲でランダムに決めたx・yのずれの分だけ、canvas の描く位置全体をずらしてから、自機・弾・敵・粒を描いていました。ずらした状態のまま描き終えたら元の位置に戻し、スコアと設定の文字は戻したあとに描くので、揺れの影響を受けません（この「ずらしてから戻す」ためのしくみは、canvas の描く前の状態をいったん残しておく仕組みと同じ考え方です）。揺れの強さの数値自体は、描き直しのたびに一定の割合を掛けて小さくしていくので、当たった直後は大きくても、ブラウザが繰り返す描き直しのあいだにだんだん小さくなり、十分小さくなったところで0に固定されて揺れが止まります。2キーで OFF にすると、当たった瞬間に強さを大きくする処理が呼ばれなくなり、そのときの強さの数値もすぐに0に戻ります。1キー・2キーは、キーボードのどの位置が押されたかを表す値で見分けています。

Claude Code でゲームを1から作る手順は、初心者がブラウザゲームを作るにあります。

情報源

• CanvasRenderingContext2D: globalAlpha property（MDN）https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha確認日 2026-09-25
• CanvasRenderingContext2D: translate() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate確認日 2026-09-25
• CanvasRenderingContext2D: save() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save確認日 2026-09-25
• Window: requestAnimationFrame() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame確認日 2026-09-25
• KeyboardEvent: code property（MDN）https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code確認日 2026-09-25
• Overview（Claude Code の公式ドキュメント）https://code.claude.com/docs/en/overview確認日 2026-09-25