AI に移動と当たり判定を作らせる頼み方と、動かないときの直し方

Claude Code に頼んだ文

作るものは、ブラウザで開くだけで遊べる HTML ファイル1つです。矢印キーで動く四角いキャラクターと、画面の中に置いた壁のブロックを頼みました。この文の前に1行、作業フォルダ（game.htm を置くフォルダ）の外は読まない・書かないでほしい、と書き添えています。

ブラウザで開くだけで遊べる HTML ファイル1つ（game.htm）を作ってください。
矢印キーで動く四角いキャラクターと、画面の中にいくつか置いた壁のブロックを作って。キャラクターは壁にぶつかったら止まって、壁の中に入らないようにしてください。画面の外にも出ないようにして。

できたら、作ったファイルの道と、どう作ったか（当たり判定の仕組み）を短く返してください。

Claude Code（モデルは Sonnet 5）に、1回だけ頼みました。

できたゲームと、当たり判定のしくみ

できた game.htm を開くと、横480×縦360ピクセルの画面に、青い四角（24×24ピクセル）と灰色の壁が4つ並びました。矢印キーを押している間、四角は1回の描き直しにつき3ピクセルずつ動きます。game.htm を読んで確かめると、押されたキーは ArrowUp・ArrowDown・ArrowLeft・ArrowRight の4つの名前で見分け、描き直しは requestAnimationFrame を呼んで続けていました。

Claude Code は、当たり判定の仕組みをこう説明しました。

• キャラクターも壁も「横の位置・縦の位置・幅・高さ」を持つ四角として扱い、2つの四角が重なっているかを4つの大小の比べで調べる。
• 動かす前に「動いたあとの位置」を仮に計算し、そこで壁と重なるなら動かさない。
• 横と縦を別々に調べるので、斜めに押して片方だけ壁にぶつかっても、もう片方には動ける。
• 画面の外へは、端の位置で止まるように数を抑える。

四角どうしが重なっているかを4つの比べで調べる方法は、回転していない四角どうしに使える、単純な形の当たり判定です。

動かして分かったこと：壁の手前で2ピクセル離れて止まる

できたゲームを、画面を持たないブラウザで開き、キーを押したままにして四角の位置を読みました。四角の位置は、画面の青い画素の左上の角で測りました。どの場面も読み込み直した直後（四角の左上が横40・縦40）から始めています。

頼んだことのうち、次の4つはできていました。

• 壁にぶつかると止まり、壁の中には入りませんでした。
• 右と下を同時に押すと、縦長の壁に沿って下へ滑り、角で引っかかりませんでした。
• 画面の四辺では、端でぴったり止まり、外に出ませんでした（左と上は0、右は456、下は336）。
• ゲームそのものから出た赤いエラーの文は、コンソールに0件でした。

うまくいかなかったのは、壁との間のすき間です。

1. 開いてすぐ右矢印キーだけを押し続けると、四角は左上の縦長の壁に当たって、押し始めから29回目の描き直しで止まりました。
2. 止まった位置は横124で、四角の右端は148です。壁の左の面は150なので、2ピクセルのすき間が空いていました。
3. そのまま右と下を押すと、四角は横124のまま、すき間を空けたまま壁沿いに下りました。
4. いったん左矢印キーで画面の左端まで行ってから右矢印キーを押すと、同じ壁に横126で止まりました。こちらはすき間0です。同じ壁でも、どこから来たかで止まる位置が2ピクセル変わりました。
5. 右上の縦長の壁に右側から近づくと、四角の左端が405で止まりました。壁の右の面は404なので、1ピクセルのすき間です。

拡大すると、青い四角と壁の間に明るい線が通っているのが分かります。

直すために Claude Code に渡した文

直し方のコードは書かずに、見たことだけを渡しました。渡した文に入れたのは次の4つです。

• 何をしたら起きるか（開いてすぐ、どのキーを押し続けたか）
• 見た症状と、その数字（四角の右端と壁の左端の位置、すき間の幅）
• 別の近づき方ではどうなったか（左端から来るとすき間0、右上の壁では1ピクセル）
• 望む動きと、今うまくいっていて崩してほしくないこと

数字は画面の画素を読んで測りましたが、上の拡大した画面のように、絵を大きくして数えることもできます。コンソールに赤いエラーが出ていないことも書き添えました。エラーが出ていたら、その文をそのまま貼るところです（コンソールに赤いエラーの文が出たときの直し方）。

渡した相手は、作ったときとは別に新しく始めた Claude Code（Sonnet 5）で、1回だけ渡しました。作業フォルダの外は読まない・書かないでほしい、直すのは game.htm だ、という1行に続けて、次の文をそのまま渡しています。

game.htm を動かしてみて、困ったことが1つあります。直してください。
【何をしたら起きるか】ゲームを開いてすぐ、右矢印キーだけを押し続けます。青い四角が、左上の縦長の灰色の壁に当たって止まります。
【見た症状】止まった青い四角と壁の間に、2ピクセルのすき間が空いています（画面を拡大して数えました。四角の右端が x=148、壁の左端が x=150 でした）。そのまま下矢印キーも押すと、すき間を空けたまま壁沿いに下りていきます。いったん左矢印キーで画面の左端まで行ってから右矢印キーを押すと、今度は同じ壁にすき間なくぴったり止まります。どこから近づいたかで、止まる位置が変わります。右上の縦長の壁に右側から近づいたときも、1ピクセルのすき間が空いて止まりました（壁の右端が x=404、四角の左端が x=405）。コンソールに赤いエラーは出ていません。
【望む動き】どの壁に、どの向きから、どこから近づいても、壁にすき間なくぴったりくっついて止まってほしいです。今うまくいっていること（壁の中に入らない・画面の外に出ない・斜めに押すと壁沿いに滑る）は、そのままにしてください。直したら、何を変えたかを短く教えてください。

直した結果：すき間0で壁にくっつく

Claude Code は、原因と直したことをこう説明しました。

• 1回に3ピクセルずつ進むので、次の1歩で壁に重なるときに「その場で止める」だけだと、止まった所と壁の間に3ピクセル未満のすき間が残る。どこから来たかで、すき間が2ピクセルだったり0だったりしたのはそのため。
• 壁に重なると分かったときは、動かさないのではなく、壁の面にぴったり合う位置まで寄せるように変えた。横と縦の両方で同じように変えた。

Claude Code は、自分で作った確かめ用の小さな台本で、すき間が0になったことを確かめたと返しました。ブラウザでキーを押して確かめたのは、次の試しです。

直ったファイルを、直す前とまったく同じ押し方で試し直しました。

どこから近づいても、左上の壁の左の面では横126に止まるようになりました。壁の中に入らないこと、斜めに押すと壁沿いに滑ること、画面の外に出ないことも、直す前と同じでした。ゲームそのものから出た赤いエラーの文は、直したあとも0件です。

今回の記録では、ゲームを作るときの頼んだ文に「ぴったりくっついて止まる」ことは入れていませんでした。直すときの文には、押したキー、止まった位置の数字、どこから来たかによる違い、崩してほしくないことを入れ、1回で直りました。Claude Code 全体の使い方は Claude Code のページ、ゲームを1本作るところからの記録は Claude Code で初心者がブラウザゲームを作るページにあります。

情報源

• 2D collision detection（2D の当たり判定・MDN）https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection確認日 2026-09-24
• KeyboardEvent: key property（押されたキーの名前・MDN）https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key確認日 2026-09-24
• Window: requestAnimationFrame() method（描き直しの呼び出し・MDN）https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame確認日 2026-09-24
• Console overview（Chrome DevTools の公式ドキュメント）https://developer.chrome.com/docs/devtools/console確認日 2026-09-24
• Common workflows（Claude Code の公式ドキュメント）https://code.claude.com/docs/en/common-workflows確認日 2026-09-24