CHAPTER 06 · 全23項目

四角形の当たり判定

4つの不等式で重なりを調べ、絵とは別に衝突範囲を定義します。

主な参照先：hit / playerRect / alienRectInto / SCRATCH

左右・上下の4条件をすべて満たす

const hit = (a, b) => a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;

x と y は四角形の左上、w と h は幅と高さです。Aの左がBの右より左、Aの右がBの左より右、さらに上下でも同じ条件を満たしたら重なっています。回転しない四角形による判定を AABB 判定と呼びます。

実験：四角形を重ねる

Aを左右に動かします。スライダーは矢印キーでも操作できます。

四角形Aのx座標

当たり判定の四角形を作る

game.html · L889–889ソースを見る ↗

function playerRect() { return { x: player.x - 13, y: PLAYER_Y, w: 26, h: 16 }; }

game.html · L900–906ソースを見る ↗

function alienRectInto(a, out) {
  const t = TYPES[a.type];
  if (a.flight) { out.x = a.flight.x; out.y = a.flight.y; }
  else { out.x = form.ox + a.c * CELL_W + (CELL_W - t.w) / 2; out.y = form.oy + a.r * CELL_H; }
  out.w = t.w; out.h = t.h;
  return out;
}

自機の判定は幅26、高さ16の本体だけです。敵は編隊内なら行・列から、突入中なら flight の座標から判定範囲を作ります。この関数を共通にすることで、飛び方が変わっても弾の判定を共用できます。

計算途中のオブジェクトを再利用する

弾と敵の組み合わせを調べる処理では、SCRATCH に結果を書き込みます。大量の一時オブジェクトを作らないための工夫です。次の呼び出しで上書きされるため、保存せずその場で使います。独立した結果が必要な箇所では alienRect() を使います。