如何在函数参数中传入类对象并实现碰撞检测函数

要写出能判断对象接触的可复用collision函数，核心是基于对象的位置和尺寸边界做重叠判断——只要两个对象的边界有重叠，就判定为碰撞。

第一步：给类补充必要属性 #

首先确保所有需要检测碰撞的对象都包含**位置（position）和尺寸（size）**属性（仅靠坐标无法判断碰撞范围）：

class Monster {
  constructor() {
    this.position = { x: 20, y: 20 };
    this.size = { width: 30, height: 30 }; // 定义对象的宽高
  }
};

class Player {
  constructor() {
    this.position = { x: 20, y: 20 };
    this.size = { width: 30, height: 30 };
  }
};

第二步：编写可复用的碰撞检测函数 #

这个函数只要求传入的对象具备position（含x、y）和size（含width、height）属性，就能通用检测矩形碰撞：

function collision(objectOne, objectTwo) {
  // 计算两个对象的四个边界坐标
  const obj1Left = objectOne.position.x;
  const obj1Right = objectOne.position.x + objectOne.size.width;
  const obj1Top = objectOne.position.y;
  const obj1Bottom = objectOne.position.y + objectOne.size.height;

  const obj2Left = objectTwo.position.x;
  const obj2Right = objectTwo.position.x + objectTwo.size.width;
  const obj2Top = objectTwo.position.y;
  const obj2Bottom = objectTwo.position.y + objectTwo.size.height;

  // 反向判断：如果两个对象完全不重叠，返回false；否则返回true
  return !(
    obj1Right < obj2Left ||
    obj1Left > obj2Right ||
    obj1Bottom < obj2Top ||
    obj1Top > obj2Bottom
  );
}

调用示例 #

const monster = new Monster();
const player = new Player();

// 初始位置重叠，返回true
console.log(collision(player, monster)); 

// 修改玩家位置，让两者不重叠，返回false
player.position.x = 100;
console.log(collision(player, monster)); 

扩展说明 #

如果你的对象是圆形，只需把碰撞逻辑换成圆心距离小于等于半径之和的判断，同样可以复用这个函数的结构，只要对象包含position（圆心坐标）和radius（半径）属性即可。

内容的提问来源于stack exchange，提问作者Cesar