如何理解JS碰撞检测函数中的crossHeight、crossWidth及计算逻辑？

先明确函数里的核心变量定义：

• dx：矩形r1中心与r2中心的x轴距离（r1中心x坐标 - r2中心x坐标）
• dy：矩形r1中心与r2中心的y轴距离（r1中心y坐标 - r2中心y坐标）
• width：两个矩形的半宽之和（(r1宽度 + r2宽度)/2）
• height：两个矩形的半高之和（(r1高度 + r2高度)/2）

1. crossWidth和crossHeight的作用 #

这两个变量是判断碰撞发生在矩形哪一条边的核心依据，本质是通过交叉乘积的方式，把x、y两个维度的距离与尺寸转化为可直接比较的数值，从而判断哪个方向的碰撞优先级更高。

2. 为什么crossWidth是width * dy而非width * dx？ #

这里的命名容易造成误导，别被Width/Height的字面意思绑定到x/y维度。

函数里的crossWidth = width * dy、crossHeight = height * dx，其实是在做相对侵入比例的等价比较：
把两个式子做比值转换，crossWidth > crossHeight等价于 width*dy > height*dx，进一步变形就是 dy/height > dx/width。
这个比值的意义是：比较y方向上的中心距占半高之和的比例，与x方向上的中心距占半宽之和的比例——哪个比例更大，就说明哪个方向的碰撞更“突出”，优先判断该方向的碰撞边（比如y方向比例大，就判断是top或bottom；x方向比例大，就判断是left或right）。

如果换成width * dx，就失去了这种“跨维度比例比较”的作用，无法区分碰撞发生的具体边。

具体碰撞判断逻辑 #

当两个矩形确实发生碰撞（Math.abs(dx)<=width && Math.abs(dy)<=height）：

• 若crossWidth > crossHeight：说明y方向的相对侵入更明显，再通过crossWidth > -crossHeight判断是bottom还是left
• 若crossWidth <= crossHeight：说明x方向的相对侵入更明显，再通过crossWidth > -crossHeight判断是right还是top

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