JavaScriptゲームで「当たり判定」がうまくいかない…
- キャラ同士がすり抜ける
- 当たっているのに反応しない
- 数学の話が出てきて意味不明
これは JavaScriptゲーム初心者が必ず通る壁 です。
ですが安心してください。
当たり判定は、考え方さえ分かればとてもシンプルです。
この記事では、
- 当たり判定の基本的な考え方
- 一番簡単な「四角形の当たり判定」
- 初心者がつまずく原因と対処法
を、コピペOK・図解イメージ前提で解説します。
当たり判定とは何をしているのか？
難しく考える必要はありません。
当たり判定 =
「2つの物体が重なっているかどうかを調べる」
ただそれだけです。
初心者向けのゲームでは、
すべて四角形として考えるのが基本になります。
一番簡単な当たり判定「四角形判定」
四角形で考える理由
- キャラ画像は四角い
- 計算がシンプル
- ほとんどの2Dゲームで使える
四角形当たり判定の考え方（超重要）
以下のような情報を使います。
- x座標
- y座標
- 幅（width）
- 高さ（height）
2つの四角が「重なっていない条件」
- 右に離れている
- 左に離れている
- 上に離れている
- 下に離れている
👉 この4つすべてに当てはまらなければ「当たっている」
コピペで使える当たり判定コード
function isHit(a, b) {
return (
a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y
);
}
使い方例
if (isHit(player, enemy)) {
console.log("当たった！");
}
各条件を日本語で説明すると
a.x < b.x + b.width
→ aは、bの右端より左にある
a.x + a.width > b.x
→ aの右端は、bの左端より右にある
a.y < b.y + b.height
→ aは、bの下端より上にある
a.y + a.height > b.y
→ aの下端は、bの上端より下にある
👉 すべて成立すると「重なっている」
よくある失敗①：座標の基準を勘違いしている
JavaScriptの座標は、
- 左上が (0, 0)
- 右が x プラス
- 下が y プラス
です。
👉 上に行くほど y が小さくなります。
よくある失敗②：画像サイズを考慮していない
player.width = 32;
player.height = 32;
のように、
width と height を必ず設定しましょう。
画像サイズとズレていると、
「当たっていないのに反応する」原因になります。
よくある失敗③：if文が動いていない
当たり判定が動かない時は、
console.log("判定している");
を if文の直前に入れてください。
👉 そもそも処理が走っていないケースが非常に多いです
実際のゲームでの使用例（にしゲーム）
にしゲームで公開している
以下のオリジナルゲームでも、この当たり判定を使っています。
▶PC用シューティングゲーム （クリックするとゲームに飛びます）
「すり抜けない」「自然な判定」を作るには、
まずこの四角形判定で十分です。
よくある質問
円形の当たり判定は必要？
👉 初心者のうちは不要です。
まずは四角形でOK。
当たり判定がズレる
👉 座標・サイズ・基準点を確認しましょう。
まとめ
- 当たり判定は「重なっているか」を見るだけ
- 四角形判定が一番簡単で万能
- 最初はコピペでOK
- 動かして直すのが最短ルート
次に読むおすすめ記事
- ▶ 【JavaScriptゲームが動かない原因7つ】
- ▶ 【HTMLとJavaScriptでゲームを作る方法｜最初の1本】
- ▶ 【JavaScriptゲームに効果音をつける方法（予定）】
🎮 にしゲームからひとこと
ゲーム制作は、
「動いた！」の積み重ねです。
当たり判定を超えられたら、
あなたのゲームは一気に「ゲームらしく」なります。
