飞船与外星人碰撞检测异常：仅西北侧生效，需实现全侧碰撞

嘿，我注意到你的碰撞检测代码只触发了北侧和西侧的碰撞，问题出在边界判断逻辑错误和混淆了图片的宽高属性上。咱们来一步步修复它：

原代码的核心问题 #

1. 内层判断里错误地用了 alienImage.height 代替 spaceshipImage.width，导致x轴方向的碰撞判断完全失效
2. 碰撞条件的逻辑组合混乱，没有正确判断两个矩形在x、y轴上的重叠关系

正确的轴对齐矩形碰撞检测逻辑 #

对于两个矩形（飞船和外星人），只要满足以下四个条件同时成立，就说明发生了碰撞：

• 飞船的右边界 > 外星人的左边界
• 飞船的左边界 < 外星人的右边界
• 飞船的下边界 > 外星人的上边界
• 飞船的上边界 < 外星人的下边界

修正后的代码 #

// 先定义好两个物体的边界参数，让代码更清晰
const spWidth = spaceshipImage.width;
const spHeight = spaceshipImage.height;
const alWidth = alienImage.width;
const alHeight = alienImage.height;

// 完整的碰撞检测逻辑
if (
  // y轴方向重叠：飞船的顶部在外星人底部之上，且飞船底部在外星人顶部之下
  spy + spHeight > ay && 
  spy < ay + alHeight &&
  // x轴方向重叠：飞船的左侧在外星人右侧之左，且飞船右侧在外星人左侧之右
  spx + spWidth > ax && 
  spx < ax + alWidth
) {
  slives -= 1;
  ax = Math.floor(Math.random() * (canvasWidth2 - alWidth));
  ay = -100;
}

代码解释 #

• 先把图片的宽高提取成变量，避免重复调用属性，也让逻辑更易读
• y轴的判断确保两个物体在垂直方向有重叠
• x轴的判断确保两个物体在水平方向有重叠
• 只有当两个方向都重叠时，才判定为碰撞，这样就能覆盖所有四个方向的碰撞情况啦

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