Canvas 2D正方形碰撞检测：左移时出现1像素穿透问题求助

嘿，我之前也碰到过这种像素级碰撞的偏移坑，给你几个实际试过的解决思路，应该能帮你搞定那个1像素嵌入的问题：

• 改用完整的轴对齐边界盒(AABB)碰撞检测
  你现在只检测左上和左下坐标，很容易漏掉边界的完整判断。试试标准的AABB碰撞逻辑：先判断两个方块不碰撞的情况，再取反得到碰撞条件——这种方式能覆盖所有边界场景，不会因为只检测局部点出现偏差。
  代码示例大概是这样：

  function isColliding(blackSquare, otherSquare) {
    // 四个方向任意一个满足就不碰撞，取反就是碰撞
    return !(
      blackSquare.x + blackSquare.width <= otherSquare.x ||
      blackSquare.x >= otherSquare.x + otherSquare.width ||
      blackSquare.y + blackSquare.height <= otherSquare.y ||
      blackSquare.y >= otherSquare.y + otherSquare.height
    );
  }
  

• 碰撞后加入“位置推回”逻辑
  不要只在碰撞时停止移动，而是直接把黑方块推回到刚好不嵌入的位置。比如左移触发碰撞时，把黑方块的x坐标设为对方方块的左边界+宽度，让两个方块刚好贴合：

  if (isColliding(blackSquare, otherSquare)) {
    // 判断是向左移动导致的碰撞
    if (blackSquare.moveDir.x < 0) {
      blackSquare.x = otherSquare.x + otherSquare.width;
    }
  }
  

  这种方式能直接修正已经出现的嵌入，适合像素级移动的场景。

• 把检测时机改成“先预判再移动”
  很多嵌入问题是因为先移动再检测——等你发现碰撞时，方块已经嵌进去了。改成先计算移动后的临时位置，提前检测会不会碰撞，没问题再实际移动，碰撞就停在临界位置：

  // 先算出移动后的临时坐标
  const tempX = blackSquare.x + blackSquare.moveStep.x;
  const tempY = blackSquare.y + blackSquare.moveStep.y;
  // 用临时坐标做碰撞检测
  if (!isColliding({...blackSquare, x: tempX, y: tempY}, otherSquare)) {
    // 无碰撞才执行移动
    blackSquare.x = tempX;
    blackSquare.y = tempY;
  } else {
    // 碰撞的话直接把位置拉到临界值
    if (blackSquare.moveStep.x < 0) {
      blackSquare.x = otherSquare.x + otherSquare.width;
    }
  }
  

  这种预判式检测能从根源避免嵌入。

• 排查坐标的整数精度问题
  如果你的移动速度是小数，或者计算坐标时出现了浮点数，渲染时可能会因为像素取整出现视觉上的嵌入。确保方块的x、y坐标都是整数，或者在碰撞检测前用Math.floor()/Math.round()对坐标做取整处理，消除浮点精度带来的偏差。

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