この記事で分かること
・JavaScriptゲームで当たり判定が必要な理由
・当たり判定の基本的な仕組み（図解イメージ）
・実際に動くサンプルコード
・初心者が必ずつまずくポイントと対処法
この記事を読み終えるころには、
「当たり判定がよく分からない」状態から
「自分のゲームに組み込める」状態になります。
難しい数学やライブラリは使いません。
まずは「動いた！」を体験してみましょう。
なぜゲームに当たり判定が必要なのか
ゲームでは、
- キャラが敵に触れた
- 弾が当たった
- アイテムを拾った
こうした 「触れた瞬間」 を判定する必要があります。
これを実現するのが 当たり判定（衝突判定） です。
当たり判定ができるようになると、
- アクションゲーム
- シューティング
- パズル
など、作れるゲームの幅が一気に広がります。
当たり判定の仕組みをシンプルに理解する
初心者向けゲームでは、
四角形同士の当たり判定 が一番シンプルでおすすめです。
考え方はこうです。
- キャラAの位置と大きさ
- キャラBの位置と大きさ
この 四角形が重なっているかどうか を調べます。
重なっていれば
👉「当たっている」
重なっていなければ
👉「当たっていない」
という判断をします。
👇 ここまで理解できたら、次はこれ
▶ 実際に遊べるサンプル
【当たり判定つきミニゲーム】
▶ この知識を使う記事
【キャラ移動の作り方】
▶ 最初から学びたい人
【JavaScriptゲーム基礎まとめ】
JavaScriptでの当たり判定サンプルコード
ここでは Canvasを使った基本例 を紹介します。
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
);
}各値の意味
x,y：左上の位置width,height：大きさ
この条件がすべて成り立つとき、
2つの四角形は重なっている という判定になります。
実際にゲームで使うとこうなる
if (isHit(player, enemy)) {
console.log("当たった！");
}この1行だけで、
- ダメージを与える
- ゲームオーバーにする
- 効果音を鳴らす
といった処理につなげられます。
初心者がよくやるミスと対処法
まずは「動いた！」を体験しよう
まずはコードを そのままコピーして貼り付けてみてください。
完璧に理解しなくても大丈夫です。
「当たった！」が表示されれば成功です。
理解は、あとから必ず追いつきます。
🎮 次にやること（おすすめ順）
まとめ
ゲーム作りは、
順番さえ間違えなければ誰でも完成できます。
このページを地図として、
あなたのゲーム制作を進めていってください。
