js怎么做碰撞检测

在JavaScript中进行碰撞检测通常用于游戏开发、动画效果或交互式网页应用中。碰撞检测的基本概念是判断两个或多个对象是否在空间上重叠。以下是一些常见的碰撞检测方法及其应用：

1. 矩形碰撞检测（AABB）

这是最简单的碰撞检测方法，适用于矩形或近似矩形的对象。

基本概念：

每个对象都有一个边界框（Bounding Box），通常是矩形。
检查两个边界框是否在x轴和y轴上重叠。

示例代码：

function isColliding(rect1, rect2) {
    return !(rect1.x > rect2.x + rect2.width ||
             rect1.x + rect1.width < rect2.x ||
             rect1.y > rect2.y + rect2.height ||
             rect1.y + rect1.height < rect2.y);
}

// 示例对象
const obj1 = { x: 10, y: 10, width: 50, height: 50 };
const obj2 = { x: 40, y: 40, width: 50, height: 50 };

console.log(isColliding(obj1, obj2)); // true

2. 圆形碰撞检测

适用于圆形或近似圆形的对象。

基本概念：

每个对象有一个中心点和半径。
计算两个圆心之间的距离，并与两个圆的半径之和比较。

示例代码：

function circleCollision(circle1, circle2) {
    const dx = circle1.x - circle2.x;
    const dy = circle1.y - circle2.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    return distance < circle1.radius + circle2.radius;
}

// 示例对象
const circle1 = { x: 50, y: 50, radius: 20 };
const circle2 = { x: 70, y: 70, radius: 20 };

console.log(circleCollision(circle1, circle2)); // true

3. 多边形碰撞检测

适用于更复杂的形状。

基本概念：

使用分离轴定理（Separating Axis Theorem, SAT）来检测多边形之间的碰撞。
这种方法较为复杂，但可以精确检测任意凸多边形的碰撞。

示例代码（简化版）：

function polygonCollision(poly1, poly2) {
    // 实现分离轴定理的逻辑
    // 这里省略具体实现，实际应用中需要详细计算
    return false; // 示例返回值
}

// 示例多边形
const poly1 = [{x:0, y:0}, {x:10, y:0}, {x:10, y:10}, {x:0, y:10}];
const poly2 = [{x:5, y:5}, {x:15, y:5}, {x:15, y:15}, {x:5, y:15}];

console.log(polygonCollision(poly1, poly2)); // true