矩形と矩形の衝突

回転しない矩形と矩形の衝突についてまとめていきます。

考え方

回転しない矩形同士の判定は特に難しい計算は登場しません。

ただ、この時は当たっていない、この時も当たっていない、と当たっていないケースを愚直に判定していきます。

実際に図で見たほうがわかりやすいと思うので図解していきます。

一方の矩形を $R1$、もう一つの矩形を $R2$ とします。

$R2$ が $R1$ の左にあってあたってないケース

$R2$ の右端 の $x$ 座標が、$R1$ の左端の $x$ 座標より小さければ、これはもう当たっていません。

$R2$ が $R1$ の右にあって、あたってないケース

$R2$ の左端 の $x$ 座標が、$R1$ の右端の $x$ 座標より大きければ、これはもう当たっていません。

$R2$ が $R1$ の下にあって、あたってないケース

$R2$ の上端 の $y$ 座標が、$R1$ の下端の $y$ 座標より小さければ、これはもう当たっていません。

$R2$ が $R1$ の上にあって、あたってないケース

$R2$ の下端 の $y$ 座標が、$R1$ の上端の $y$ 座標より大きれば、これはもう当たっていません。

上記４パターン以外であれば当たっている

$R2$ が $R1$ の完全に左にあるのか、右にあるのか、下にあるのか、上にあるのか

いずれかの条件に一致した瞬間、矩形同士は衝突していないことになります。

逆に、全ての条件に一致しなかった場合、矩形同士は衝突しています。

条件が多く、ちょっとややこしさはありますが、落ち着いて考えれば難しくないと思います。

サンプルコード

/**
  * 矩形と矩形が当たっているかどうか
  * @param r1 矩形１
  * @param r2 矩形２
  */
 export function isHit(r1:Rect, r2:Rect) 
 {
   // x座標に関する判定
   if (r2.maxX < r1.minX) return false;
   if (r1.maxX < r2.minX) return false;
 
   // y座標に関する判定
   if (r2.maxY < r1.minY) return false;
   if (r1.maxY < r2.minY) return false;
 
   return true;
 }