JavaScriptとCanvasを使用して2つの長方形が重なっているかをチェックする方法

Canvasの準備: HTMLファイル内にCanvas要素を作成し、JavaScriptでCanvasオブジェクトを取得します。
長方形の描画: Canvas上に2つの長方形を描画します。長方形の位置やサイズを指定する必要があります。
重なりのチェック: 2つの長方形が重なっているかどうかを判定するために、以下の条件を使用します。
- 長方形1の右端が長方形2の左端よりも左にあるか、長方形1の左端が長方形2の右端よりも右にある場合、2つの長方形は重なっていません。
- 長方形1の下端が長方形2の上端よりも上にあるか、長方形1の上端が長方形2の下端よりも下にある場合、2つの長方形は重なっていません。上記の条件のいずれも満たさない場合、2つの長方形は重なっています。
コードの例: 上記の手順を具体的なコード例で示します。

// Canvasの準備
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 長方形の描画
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100); // 長方形1
ctx.fillStyle = 'red';
ctx.fillRect(80, 80, 100, 100); // 長方形2
// 重なりのチェック
function checkOverlap(rect1, rect2) {
  if (
    rect1.x + rect1.width < rect2.x ||
    rect1.x > rect2.x + rect2.width ||
    rect1.y + rect1.height < rect2.y ||
    rect1.y > rect2.y + rect2.height
  ) {
    return false; // 重なっていない
  }
  return true; // 重なっている
}
const rectangle1 = { x: 50, y: 50, width: 100, height: 100 };
const rectangle2 = { x: 80, y: 80, width: 100, height: 100 };
const isOverlap = checkOverlap(rectangle1, rectangle2);
console.log(isOverlap); // true

このコードでは、2つの長方形を描画し、checkOverlap関数を使用して重なりをチェックしています。長方形の位置とサイズはオブジェクトで表現され、関数に渡されます。checkOverlap関数は、2つの長方形が重なっている場合にtrueを返し、重なっていない場合にfalseを返します。

以上が、JavaScriptとCanvasを使用して2つの長方形が重なっているかをチェックする方法です。この方法を使えば、Webアプリケーションやゲームでの衝突判定など、さまざまな場面で活用することができます。