Canvasに表示したオブジェクトに当たり判定（衝突判定）をつける方法

HTML5 Canvas APIをつかってゲームをつくろうとしている。もちろん自作ゲームエンジンで！
ということで前回Canvas上に表示したオブジェクトをキーボード操作で移動させる方法をまとめた。

今回はその続きで、移動させたオブジェクトが他の何らかのオブジェクトに当たったときの判定（当たり判定、衝突判定）を実装する。

当たり判定を実装する

前提として、Canvas上に表示されているオブジェクトのそれぞれの座標とサイズを保持していることとする。
具体的には、前回の記事を参照ください。

/**
  * 当たり判定を行う
  * @param {Object} self メイン
  * @param {Object} target ターゲット
  * @return {boolean} 衝突検知したらtrue
  */
_hitTest(self, target) {
  const myTop    = self.y;
  const myBottom = self.y + self.h;
  const myLeft   = self.x;
  const myRight  = self.x + self.w;

  const targetTop    = target.y;
  const targetBottom = target.y + target.h;
  const targetLeft   = target.x;
  const targetRight  = target.x + target.w;

  return (myTop < targetBottom && targetTop < myBottom) && (myLeft < targetRight && targetLeft < myRight);
}

2つのオブジェクトを引数に受け取り、衝突を検知したらtrueを返すメソッドだ。
オブジェクトには{ x:X座標, y: Y座標, w: オブジェクトの幅, h: オブジェクトの高さ }を持っている。

この4つの値を使って衝突を検知する。

検知する条件は以下の4つ。

• selfオブジェクトがtargetオブジェクトの上部に当たったとき
• self.Y座標 < target.Y座標 + target.高さ
• self上辺がtarget下辺より上にある場合
• selfオブジェクトがtargetオブジェクトの下部に当たったとき
• target.Y座標 < self.Y座標 + self.高さ
• self下辺がtarget上辺より下にある場合
• selfオブジェクトがtargetオブジェクトの左部に当たったとき
• self.X座標 < target.X座標 + target.幅
• self左辺がtarget右辺より左にある場合
• selfオブジェクトがtargetオブジェクトの右部に当たったとき
• target.X座標 < self.X座標 + self.幅
• self右辺がtarget左辺より右にある場合

こんな感じで衝突を検知できる。
このメソッドを使い、trueが返ってきたら衝突したということなので、衝突に応じた処理を行うことで当たり判定を実装できる。

完成

以上


written by @bc_rikko