HTML5 Canvas碰撞检测问题求助：JavaScript碰撞检测函数调试

阿华AIGC实验室

2026-5-21

帮你搞定JavaScript对象碰撞检测失效的问题

嘿，作为编程新手碰到这种问题太正常啦！我来帮你一步步排查调试这个碰撞检测函数～

首先，先给你补全正确的轴对齐包围盒（AABB）碰撞检测逻辑——这是2D场景里最常用的碰撞检测方式，你原来的函数缺了最后一个关键条件：

function collision(a, b) {
  return (
    a.x < b.x + b.width &&
    a.x + a.width > b.x &&
    a.y < b.y + b.height &&
    a.y + a.height > b.y // 你之前的代码少了这一行！
  );
}

这四个条件分别检查了两个对象在水平和垂直方向上的重叠情况，缺一不可，少了最后一行的话，垂直方向的碰撞根本检测不到。

接下来，我们从几个常见的坑点排查：

先确认对象的属性是否正确赋值
如果你是用PNG图片来表示对象，一定要注意：图片是异步加载的，如果你在图片加载完成前就获取它的width和height，拿到的会是0或者undefined，这直接会让碰撞检测失效。正确的做法是在图片onload事件里赋值：

// 错误示例：图片没加载就拿尺寸
const player = {
  img: new Image(),
  x: 50,
  y: 50,
  width: this.img.width, // 此时img还没加载，width为0
  height: this.img.height
};

// 正确打开方式
const player = {
  img: new Image(),
  x: 50,
  y: 50,
  width: 0,
  height: 0
};
player.img.src = '你的图片路径.png';
player.img.onload = () => {
  // 图片加载完成后再赋值宽高
  player.width = player.img.width;
  player.height = player.img.height;
};

检查两个对象的坐标系统是否一致
要保证a和b的x、y都是基于同一个坐标系的（比如都是以画布左上角为原点）。如果一个对象的坐标是相对于某个父元素，另一个是相对于画布，那碰撞检测肯定会出错。

确认碰撞检测的调用时机
碰撞检测要在对象位置更新之后调用，比如在你的动画循环里，先更新对象的位置，再检测碰撞，最后渲染：

function animate() {
  // 1. 更新对象位置
  player.x += player.moveSpeed;
  enemy.x -= enemy.moveSpeed;

  // 2. 检测碰撞
  if (collision(player, enemy)) {
    console.log('碰撞发生啦！');
  }

  // 3. 渲染画面
  drawEverything();
  requestAnimationFrame(animate);
}

如果只在页面加载时调用一次碰撞检测，那后续对象移动后的碰撞肯定检测不到。

用简化场景测试函数本身
你可以先抛开图片，用两个手动设置属性的矩形对象测试碰撞函数，看看它本身是否正常工作：
```
// 两个重叠的矩形
const objA = {x: 100, y: 100, width: 50, height: 50};
const objB = {x: 120, y: 120, width: 50, height: 50};
console.log(collision(objA, objB)); // 应该返回true
```
如果这个测试能正常返回true，那问题大概率出在你图片对象的属性设置上，而不是碰撞函数本身。