ゲーム制作で必ず必要になるのが**「当たり判定」**です。
この記事では、HTML＋JavaScriptの2Dゲームを想定して、
敵とプレイヤーがぶつかった瞬間を検出する方法を、
初心者の方にも分かるように解説します。
当たり判定とは？
当たり判定とは、
キャラクター同士が画面上で重なったかどうかを判定する仕組みのことです。
当たり判定ができるようになると、以下のような処理が可能になります。
- 敵に触れたらダメージを受ける
- ゲームオーバー判定
- ノックバックやエフェクト演出
👉 2Dゲームでは 「四角形（矩形）同士の判定」 が最も一般的です。
今回使う当たり判定の考え方
プレイヤーと敵を 四角形 として扱い、
次の4つの条件をチェックします。
当たっていない状態
- プレイヤーの右端が敵の左端より左
- プレイヤーの左端が敵の右端より右
- プレイヤーの下端が敵の上端より上
- プレイヤーの上端が敵の下端より下
このどれか1つでも当てはまれば「非接触」
👉 逆に言うと、全部外れたら衝突です。
プレイヤー・敵のデータ例
まずは、プレイヤーと敵の情報を用意します。
const player = {
x: 100,
y: 200,
width: 32,
height: 32,
hp: 3,
isInvincible: false
};
const enemy = {
x: 120,
y: 210,
width: 32,
height: 32
};
当たり判定の関数（コピペOK）
以下の関数が、当たり判定の心臓部です。
function isCollision(a, b) {
return !(
a.x + a.width < b.x ||
a.x > b.x + b.width ||
a.y + a.height < b.y ||
a.y > b.y + b.height
);
}
💡 true が返ってきたら「衝突している」という意味です。
ゲームループでの使い方
ゲームの更新処理（requestAnimationFrameなど）の中で使います。
if (isCollision(player, enemy)) {
console.log("敵と衝突！");
}
ダメージ処理を追加する
無敵時間なし（シンプル版）
if (isCollision(player, enemy)) {
player.hp--;
}
⚠ このままだと、毎フレームHPが減るので注意。
無敵時間あり（おすすめ）
if (!player.isInvincible && isCollision(player, enemy)) {
player.hp--;
player.isInvincible = true;
setTimeout(() => {
player.isInvincible = false;
}, 1000); // 1秒間無敵
}
✨ 実際のゲームに近い挙動になります。
当たり判定を調整するコツ
操作感を良くするために、
見た目より当たり判定を少し小さくするのがおすすめです。
const hitBox = {
x: player.x + 4,
y: player.y + 4,
width: player.width - 8,
height: player.height - 8
};
よくある失敗例
❌ 画像サイズと当たり判定サイズが合っていない
❌ 無敵時間がなく一瞬でゲームオーバー
❌ 当たり判定が大きすぎて理不尽に感じる
👉 デバッグ用に枠線を表示すると調整しやすくなります。
次に読みたいおすすめ記事
▶ 次のステップ①
【初心者向け】攻撃判定の実装方法（プレイヤー → 敵）
▶ 次のステップ②
【JavaScriptゲーム】HP管理＆ゲームオーバー処理
まとめ
- 当たり判定は 矩形判定が基本
- 関数化すると再利用しやすい
- 無敵時間を入れるとゲームらしくなる
- 当たり判定は「少し小さめ」が正解
