Claude Codeに、タイルマップの読み込みと壁の当たりを作らせる頼み方【AIでゲーム開発】
Claude Code に文を1回頼むと、文字のタイルマップ（壁・床・コイン・自機の始めの位置）を読み込んで描き、壁のマスに入らない当たり判定と、斜め押しでもすり抜けない動き、コインを取るとスコアが増える仕組みを持つブラウザゲームができました。画面を持たないブラウザで自機の位置を毎フレーム記録して確かめた範囲では、マップの文字どおりに壁・床・コイン・自機の始めの位置が描かれ、壁へ押し続けても自機が壁のマスに入らず、斜めに2つのキーを押しても壁をすり抜けず、コインに重なると消えてスコアが1増えることは、頼んだとおりでした。
Claude Code に頼んだ文
空の作業フォルダを1つ決め、Claude Code に次の文を1回だけ渡しました。文字で書いたタイルマップを読み込んで描くこと、マップの外周と内側に壁を置くこと、自機は壁のマスに入れないこと、斜めに2つのキーを押しても壁をすり抜けないこと、コインを取るとスコアが増えることを頼んでいます。
Claude Codeにタイルマップの読み込みと壁の当たり判定を頼んだ文
作業フォルダは C:\games\my-game\ だけです。このフォルダの外は読まない・書かないでください。
HTML ファイル1つ（game.htm）で、ブラウザで動く小さなゲームを作ってください。画像のファイルは使わず、四角と色だけで描いてください。
ステージは、文字で書いたタイルマップ（1文字が1マス。「#」が壁、「.」が床、「C」がコイン、「P」が自機の始めの位置）を、game.htm の中に書いておき、それを読み込んで描いてください。
マップは横 16 マス・縦 12 マスで、外周はすべて壁にし、中にも壁のかたまりをいくつか置いてください。
自機（四角）を矢印キーで上下左右に動かします。自機は壁のマスに入れず、壁に当たったらその向きには進めないようにしてください。斜めに2つのキーを押したときも、壁をすり抜けないようにしてください。
コインのマスに重なるとコインが消え、スコアが1増えます。スコアを画面の左上に出してください。
作り終えたら、タイルマップをどう読み込んで描いているか、壁との当たりをどう決めているかを、ふつうの言葉で説明してください。※ このページの枠の中の作業フォルダの道は、例の道（C:\games\ の下）に置き換えて載せています。ほかの文字はそのままです。
Claude Code は HTML ファイルを1つ作り、タイルマップの読み込み方と壁の当たりの決め方を次のように説明しました。
タイルマップは、1文字が1マスの文字列を16行ぶん並べて game.htm の中に書き、起動したときに1文字ずつ読んで、壁かどうかを覚える表と、コインの位置の一覧と、自機の始めのマスに分けて持ち直す、とのことです。Claude Code は16行ぶんと説明しましたが、game.htm を読むと、マップの文字列は12行でした。分けたあとは、この表を上から順になぞって、壁のマスは灰色の四角、それ以外は暗い色の四角を敷き、コインが残っているマスには黄色い小さな四角を重ねる、と説明しました。
壁の当たりについては、自機はマス目にきっちり合わせず、マスより少し小さい四角としてピクセル単位の座標で動かし、「動いた先で壁に当たるか」を、自機の四角の四隅の点それぞれがどのマスに入るかで調べ、そのどれか1つでも壁のマスなら当たっていると判定する、と説明しました。横方向と縦方向は別々に判定・移動する仕組みで、斜めに2つのキーを押したとき、片方の向きが壁でふさがれていても、もう片方が空いていればそちらへは動ける、当たった向きには1ピクセルずつ壁の手前まで自機を戻す、とのことです。コインの取得は、自機の四角の中心点がどのマスに入っているかを見る、壁の判定とは別の仕組みだと説明しました。
Claude Code は、埋め込んだスクリプトを node の構文チェックだけ通し、ブラウザで実際にキーを押して動かす試しはしていない、と自分で書きました。この説明は Claude Code 自身の説明で、動いた証拠ではありません。次の節は、その動きを測った記録です。
タイルマップの読み込みと壁の当たりが頼んだとおりかを確かめる
矢印キーは、押し下げている間はずっと動き続けます。押し続ける試しでは、それぞれのキーを1回だけ押し下げて一定の時間が経ってから離す操作をし、OS のキーのくり返し（押しっぱなしのときに何度も送られる知らせ）ではなく、押し下げたままの状態を保つ形にしました。
画面を持たないブラウザ（Chrome）で game.htm をファイルのまま開き、開く前に走る処理を1つ差し込みました。この処理は、ゲームの描き直しの処理が1回終わるたびに、自機のピクセル単位の座標と大きさ、そのときのスコアを、時刻（ページを開いてからの経過ミリ秒）とともに記録します。マップの読み込みは、Canvas APIの、描いた絵の決まった範囲の色を読み出す仕組みで、マップの192マス（16×12）それぞれ1点の色と、コイン9個それぞれ中心の1点の色、自機の中心の1点の色を読みました。壁の当たりは、game.htm の中の判定の処理を呼ばずに、このツール自身がタイルマップの文字とマスの大きさ（ともにページから読み取った値）から作った、独立の判定（自機の四角の四隅の点が属するマスのどれかが壁の文字かどうか）で、矢印キーを押していた6つの区間の自機の位置を数えました。
| したこと | 記録に出たこと |
|---|---|
| 開いて0.6秒待ち、マップとコインと自機の色を読む | マップの192マスの色は、壁の文字のマスがすべて壁の色、それ以外がすべて床の色かコインの色で、文字と画素の食い違いは0件。コイン9個の色もすべてコインの色で、食い違いは0件。自機の始めの位置（文字の「P」があったマス）の中心の色は自機の色だった |
| 下矢印キーを3秒押し続ける | 自機の y 座標が39から328まで増えて止まった。押している間の181フレームすべてで、自機の四隅の点が壁のマスに入っていなかった |
| 続けて右矢印キーを3.5秒押し続ける | 自機の x 座標が39から456まで増えて止まった（y は328のまま）。押している間の211フレームすべてで、壁のマスに入っていなかった |
| 地図の右下・外周の角へ向けて、下矢印と右矢印を同時に1.5秒押し続ける | 自機の位置は始め（x456・y328）から終わり（x456・y328）まで一致し、押している間まったく動かなかった。91フレームすべてで、壁のマスに入っていなかった |
| ページを読み込み直し、内側の壁のかたまりの角へ向けて、下矢印と右矢印を同時に1.5秒押し続ける | 自機の位置は、x座標だけが42から159まで増えてy座標が40のまま変わらない区間と、そのあと x が200のまま変わらずy座標だけが82から130まで増える区間が、記録の中にあった。90フレームすべてで、壁のマスに入っていなかった |
| 上矢印と左矢印を同時に1.2秒押し続けて左上へ戻す | 73フレームすべてで、壁のマスに入っていなかった |
| 右矢印を押し続け、スコアが増えるまで待つ | スコアが2から3へ変わった時点の記録があり、そのときの自機の中心のマス座標は、コインの文字があったマスと一致していた |
1回目に開いたときと、読み込み直したあとを合わせて858フレームの自機の位置を記録しました。そのうち、矢印キーを押していた6つの区間（下矢印181・右矢印211・外周の角への斜め押し91・内側の角への斜め押し90・左上へ戻す73・コインへ向かう107、合わせて753フレーム）で、このツール自身の判定にかけたところ、壁のマスに入っていたフレームは0件でした。この試しのあいだ、コンソールに出たエラー・警告・例外は0件でした。
矢印キー以外の入力と、内側の壁のかたまりを四方から囲む閉じた通路での斜め押しは、この試しでは確かめていません。
ほかのタイルマップの当たりの仕組み
矢印キーで自機を動かし、四角どうしの重なりで壁との当たりを決める基本の仕組みは、AI に移動と当たり判定を作らせる頼み方にあります。この枚は、それを文字のタイルマップの読み込みと、マスの表を使った当たり判定に広げたものです。
情報源
- Overview（Claude Code の公式ドキュメント）https://code.claude.com/docs/en/overview確認日 2026-09-25
- CanvasRenderingContext2D: fillRect() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect確認日 2026-09-25
- CanvasRenderingContext2D: getImageData() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData確認日 2026-09-25
- KeyboardEvent: key property（MDN）https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key確認日 2026-09-25
- KeyboardEvent: repeat property（MDN）https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat確認日 2026-09-25
- Window: requestAnimationFrame() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame確認日 2026-09-25