碰撞检测是JavaScript游戏开发中实现互动的核心技术，用于判断物体是否接触。常见的方法有三种：1. 矩形碰撞（AABB），通过判断两个矩形在x轴和y轴是否同时重叠，适用于2D游戏中方形对象，计算高效；2. 圆形碰撞，利用圆心距离与半径之和比较，适合球形物体，可优化为平方比较避免开方运算；3. 像素级碰撞，检测图像非透明像素是否重叠，精度高但性能消耗大，常结合AABB预筛。为提升效率，应避免O(n²)遍历，采用四叉树或网格分割空间，先粗检再精检。在Canvas中维护对象位置信息实时检测，DOM游戏中可通过getBoundingClientRect获取元素位置进行判断。结合调试可视化有助于发现逻辑问题，合理选择策略对游戏流畅性至关重要。
在JavaScript游戏开发中，碰撞检测是实现角色互动、障碍规避和游戏逻辑的核心技术之一。它用于判断两个或多个物体是否发生接触或重叠。常见的应用场景包括子弹击中敌人、主角吃到道具、碰到墙壁停止移动等。实现准确而高效的碰撞检测，能显著提升游戏的体验和真实性。
常见的碰撞检测方法
根据游戏类型和物体形状的不同，可以选择不同的碰撞检测策略：
1. 矩形碰撞（AABB - Axis-Aligned Bounding Box）
这是最基础也是最常用的检测方式，适用于大多数2D游戏中的矩形对象（如角色、砖块、平台等）。原理是判断两个矩形在x轴和y轴上是否同时重叠。
立即学习“Java免费学习笔记（深入）”；
JavaScript实现示例：
function checkCollision(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;
}
只要所有条件都成立，就说明发生了碰撞。这种方法计算快，适合大量对象之间的粗略检测。
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;
}
如果追求性能，可以省略开方操作，直接比较距离的平方与半径和的平方。
3. 像素级碰撞（Pixel Perfect）
当需要更高精度时（例如不规则图形），可使用像素级检测。它会检查两个图像重叠区域中是否有非透明像素发生重叠。虽然准确，但计算量大，通常先用AABB做初步筛选，再进入像素检测。
优化建议
在实际开发中，避免对所有对象进行两两比对，这会导致O(n²)的时间复杂度。可以采用以下方式优化：
- 使用空间分割结构，如四叉树（QuadTree）或网格（Grid），将对象按位置分组，只检测可能靠近的对象。
- 先做粗略检测（如AABB），再决定是否进行精细检测（如像素级）。
- 为不需要频繁检测的对象设置状态标记，减少冗余判断。
结合Canvas或DOM使用
在基于Canvas的游戏里，每个游戏对象通常维护自己的位置、宽高或半径信息，每帧更新后调用碰撞检测函数。如果是DOM+CSS动画的游戏，可以通过getBoundingClientRect()获取元素的实际位置进行检测。
示例（DOM元素碰撞）：
const elem1 = document.getElementById('player').getBoundingClientRect();
const elem2 = document.getElementById('enemy').getBoundingClientRect();
<p>if (checkCollision({x: elem1.left, y: elem1.top, width: elem1.width, height: elem1.height},
{x: elem2.left, y: elem2.top, width: elem2.width, height: elem2.height})) {
console.log('发生碰撞！');
}</p>基本上就这些。掌握基础的碰撞检测方法，并根据项目需求选择合适的策略，是开发流畅JavaScript小游戏的关键一步。不复杂但容易忽略细节，比如坐标系的理解和更新时机的把控。多实践，结合调试可视化（如绘制碰撞框），能更快发现问题。
