JS碰撞检测技巧与实现方法

想要在JavaScript游戏中实现逼真的互动效果？碰撞检测是关键！本文深入解析JS碰撞检测的常用方法，包括简单高效的AABB碰撞检测和适用于圆形物体的圆形碰撞检测。AABB碰撞检测以其计算简便的特性，成为游戏开发中初步筛选碰撞的首选方案。本文还将探讨更复杂的图形碰撞处理，如分离轴定理（SAT），以及优化大量对象碰撞检测性能的网格系统和四叉树等空间划分技术。无论你是游戏开发者还是前端工程师，掌握这些JS碰撞检测技巧，都能为你的项目增添更多可能性。

JS碰撞检测通过几何关系判断图形是否重叠，常用AABB、圆形检测等方法；AABB因计算简单高效，适合初步筛选碰撞，广泛用于游戏开发。

JS实现碰撞检测，本质上就是判断两个或多个图形对象在二维或三维空间中是否发生重叠。这通常通过计算它们的位置和尺寸关系来完成，最常见的方法包括轴对齐包围盒（AABB）、圆形碰撞、以及更复杂的点在多边形内或分离轴定理（SAT）等。核心在于将复杂的图形交集问题，转化为简单的几何关系判断。

解决方案

要实现JS中的碰撞检测，最直接且常用的方式是基于几何形状的判断。这里我们主要聚焦于二维场景，因为大部分前端应用或小游戏都以此为基础。

1. 轴对齐包围盒（AABB）碰撞检测

这是最基础也最常用的方法，适用于矩形或方形对象。它的原理很简单：两个矩形发生碰撞，当且仅当它们在X轴上重叠，并且在Y轴上也重叠。

假设我们有两个矩形对象rect1和rect2，每个对象都有x（左上角X坐标）、y（左上角Y坐标）、width和height属性。

function checkAABBCollision(rect1, rect2) {
    // 检查X轴是否重叠
    const xOverlap = rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x;

    // 检查Y轴是否重叠
    const yOverlap = rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y;

    // 只有当X轴和Y轴都重叠时，才发生碰撞
    return xOverlap && yOverlap;
}

// 示例用法
const player = { x: 50, y: 50, width: 30, height: 30 };
const enemy = { x: 60, y: 70, width: 40, height: 40 };
const wall = { x: 100, y: 100, width: 20, height: 20 };

// console.log("玩家与敌人碰撞:", checkAABBCollision(player, enemy)); // true
// console.log("玩家与墙壁碰撞:", checkAABBCollision(player, wall));   // false

这种方法计算量小，效率高，是很多游戏引擎内部进行粗略碰撞检测的首选。

2. 圆形碰撞检测

适用于圆形或球形对象。原理是判断两个圆心之间的距离是否小于或等于它们半径之和。

假设我们有两个圆形对象circle1和circle2，每个对象都有x（圆心X坐标）、y（圆心Y坐标）和radius属性。

function checkCircleCollision(circle1, circle2) {
    // 计算两圆心之间的距离的平方，避免开方运算以提高性能
    const dx = circle1.x - circle2.x;
    const dy = circle1.y - circle2.y;
    const distanceSquared = dx * dx + dy * dy;

    // 计算两半径之和的平方
    const radiusSum = circle1.radius + circle2.radius;
    const radiusSumSquared = radiusSum * radiusSum;

    // 如果距离平方小于或等于半径和的平方，则发生碰撞
    return distanceSquared <= radiusSumSquared;
}

// 示例用法
const bullet = { x: 10, y: 10, radius: 5 };
const target = { x: 12, y: 14, radius: 8 };

// console.log("子弹与目标碰撞:", checkCircleCollision(bullet, target)); // true

同样，这个方法也非常高效，适用于圆形物体的互动。

3. 点与矩形碰撞检测

判断一个点是否在一个矩形内部。

function checkPointRectCollision(point, rect) {
    return point.x >= rect.x &&
           point.x <= rect.x + rect.width &&
           point.y >= rect.y &&
           point.y <= rect.y + rect.height;
}

为什么说AABB碰撞检测是游戏开发中最常用的入门级方法？

说实话，AABB（Axis-Aligned Bounding Box）碰撞检测之所以成为入门级和广泛使用的方案，主要在于它的极致简单和高效。它不涉及复杂的数学运算，就是简单的区间重叠判断。你想想看，在游戏里，我们每秒可能要处理成千上万个物体的运动和潜在碰撞，如果每个都用复杂的算法去算，那性能肯定扛不住。AABB的计算量极小，非常适合作为粗略检测（Broad Phase）的第一步。

打个比方，你有个超大的房间（游戏世界），里面有很多人（游戏对象）。你不可能每个人都去细致检查他们是不是真的“撞”在一起了，你可能先看看他们是不是在同一个“区域”里。AABB就是这个“区域”判断。它能快速排除掉绝大部分根本不可能发生碰撞的对象对，大大减少了后续需要进行精确检测的对象数量。比如，一个在屏幕左上角的角色，和一个在屏幕右下角的敌人，AABB检测能瞬间告诉你它们不可能碰撞，根本不需要进一步计算。

当然，AABB也有它的局限性，比如它只能完美适配轴对齐的矩形。如果你的对象是旋转的矩形，或者是不规则形状，AABB就会出现“假阳性”——它会告诉你碰撞了，但实际上对象并没有接触。这时候就需要更精确的窄相检测（Narrow Phase）来进一步判断。但即便如此，AABB依然是构建高效碰撞系统不可或缺的一环。

除了矩形和圆形，JavaScript还能如何处理更复杂的图形碰撞？

当你脱离了简单的矩形和圆形，进入到多边形、甚至是凹多边形或者带旋转的图形碰撞时，事情就开始变得有点意思了。JS本身没有内置这些高级碰撞检测的功能，所以我们需要自己实现或者引入成熟的库。

处理复杂图形，最常用的进阶方法之一是分离轴定理（Separating Axis Theorem, SAT）。这玩意儿听起来有点玄乎，但核心思想是：如果两个凸多边形没有发生碰撞，那么一定存在一条直线（分离轴），能够将这两个多边形完全分开。反之，如果找不到这样一条直线，那么它们就碰撞了。

SAT的实现相对复杂，它要求你找到所有潜在的分离轴（通常是每个多边形每条边的法线），然后将两个多边形投影到这些轴上，检查它们的投影是否重叠。如果所有轴上的投影都重叠，那就碰撞了。

// SAT的伪代码概念，实际实现会复杂很多
function checkSATCollision(polygon1, polygon2) {
    const axes = getAxes(polygon1).concat(getAxes(polygon2)); // 获取所有潜在分离轴

    for (const axis of axes) {
        // 将两个多边形投影到当前轴上
        const projection1 = projectPolygon(polygon1, axis);
        const projection2 = projectPolygon(polygon2, axis);

        // 如果投影不重叠，则存在分离轴，没有碰撞
        if (!overlap(projection1, projection2)) {
            return false;
        }
    }
    // 如果所有轴上的投影都重叠，则发生碰撞
    return true;
}

// getAxes, projectPolygon, overlap 等函数需要自行实现
// getAxes: 获取多边形所有边的法线向量作为轴
// projectPolygon: 将多边形的所有顶点投影到给定轴上，得到一个最小和最大值区间
// overlap: 判断两个区间是否重叠

SAT的优点是精确度高，适用于任意凸多边形，并且在检测到碰撞时还能提供碰撞信息（比如最小穿透向量）。缺点就是实现起来比较麻烦，计算量也比AABB大得多。

对于更不规则的图形，你可能需要考虑：

• 组合形状： 将复杂形状分解成多个简单的AABB或圆形，然后分别进行碰撞检测。
• 像素级碰撞检测： 适用于图像精灵，但性能开销巨大，通常只在非常特殊的场景下使用。
• 物理引擎： 像Matter.js、P2.js这些专业的JavaScript物理引擎，它们内置了各种高级的碰撞检测和响应机制，直接使用它们会省去大量开发工作。

选择哪种方法，完全取决于你的项目需求、性能预算以及图形的复杂程度。通常都是从简单到复杂，逐步升级。

在实际项目中，如何优化大量对象的碰撞检测性能？

处理大量对象的碰撞检测，如果每个对象都和所有其他对象进行一次“你是不是撞到我了”的询问，那计算量会呈指数级增长（O(n^2)）。这在对象数量稍微多一点的时候就会让你的程序卡顿得像PPT。所以，优化是必须的。

核心思路就是减少需要进行精确碰撞检测的对象对数量。这通常通过空间划分（Spatial Partitioning）技术来实现。

1. 网格系统（Grid System）

这是最直观的一种方法。你把整个游戏世界划分成一个个固定大小的网格单元。每个对象在移动时，都记录它当前所在的网格单元。当需要进行碰撞检测时，一个对象只需要和它自己所在的网格单元以及相邻的几个网格单元中的其他对象进行检测。

// 简单网格系统概念
const gridSize = 100; // 每个网格单元的边长
const grid = {}; // 用于存储对象在每个网格单元中的引用

function addObjectToGrid(obj) {
    const gridX = Math.floor(obj.x / gridSize);
    const gridY = Math.floor(obj.y / gridSize);
    const key = `${gridX},${gridY}`;

    if (!grid[key]) {
        grid[key] = [];
    }
    grid[key].push(obj);
}

function getPotentialColliders(obj) {
    const colliders = new Set();
    const gridX = Math.floor(obj.x / gridSize);
    const gridY = Math.floor(obj.y / gridSize);

    // 检查当前及相邻的9个网格单元
    for (let dx = -1; dx <= 1; dx++) {
        for (let dy = -1; dy <= 1; dy++) {
            const key = `${gridX + dx},${gridY + dy}`;
            if (grid[key]) {
                grid[key].forEach(otherObj => {
                    if (otherObj !== obj) { // 排除自身
                        colliders.add(otherObj);
                    }
                });
            }
        }
    }
    return Array.from(colliders);
}

// 每次更新时，先清空并重建网格，或者只更新移动对象的网格位置
// 然后对每个对象，调用 getPotentialColliders 获取潜在碰撞对象，再进行精确检测

网格系统简单易实现，对于对象分布比较均匀的场景效果很好。但如果对象分布非常稀疏或非常密集，或者对象大小差异很大，它的效率可能会下降。

2. 四叉树（Quadtree）

四叉树是一种树形数据结构，它递归地将二维空间划分为四个象限，直到每个象限内的对象数量达到某个阈值，或者象限大小达到最小。

它的优势在于能够自适应对象的分布。在对象密集区域，树的深度会更深，划分更细；在对象稀疏区域，划分则相对粗犷。这使得它在处理非均匀分布的对象时比固定网格更高效。

实现一个完整的四叉树需要考虑插入、查询、更新和删除对象时的逻辑，以及如何处理跨越多个象限边界的对象。虽然复杂一点，但它在很多大型游戏中的表现非常出色。

无论是网格还是四叉树，它们都属于粗略检测（Broad Phase）。它们的目标是快速筛选出可能发生碰撞的对象对，然后只对这些“嫌疑对象”进行精确的窄相检测（Narrow Phase）。这种两阶段的策略是优化大量对象碰撞检测性能的关键所在。

此外，还有一些其他的优化思路：

• 分层检测： 比如背景物体和角色、子弹和敌人等，可以分组进行碰撞检测，避免不必要的比较。
• 休眠/激活： 对于静止不动或者距离太远的对象，可以暂时将其从检测队列中移除，直到它们再次进入活跃区域。
• 碰撞组/层： 允许你定义哪些类型的对象可以相互碰撞，哪些不能，进一步减少检测次数。

选择哪种优化方案，取决于你的项目规模、对象数量、对象运动模式以及性能瓶颈在哪里。通常是从最简单的方法开始，如果性能出现问题，再逐步引入更高级的优化技术。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS碰撞检测技巧与实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。