JavaScript - 我不明白这种碰撞检测功能是如何工作的

Question

我正在注册这个course并且他们的代码example中有这个功能，我不明白这个特定的工作原理。

function circRectsOverlap(x0, y0, w0, h0, cx, cy, r) {
   var testX=cx;
   var testY=cy;
   if (testX < x0) testX=x0;
   if (testX > (x0+w0)) testX=(x0+w0);
   if (testY < y0) testY=y0;
   if (testY > (y0+h0)) testY=(y0+h0);
   return (((cx-testX)*(cx-testX)+(cy-testY)*(cy-testY))< r*r);
}

前四个参数是矩形的x和y位置，宽度和高度，而后三个是x和y位置，以及画布中圆的半径。

如果矩形和圆形触摸，则函数返回true，因此发生碰撞。

Answer 1

看来testX和testY成为距矩形所包围的圆心的最近点的坐标。如果测试将这些值“钳制”到矩形的边缘，则四个圆圈的中心应该在任一维度上都在圆的中心。考虑圆在矩形内部居中的情况可能会有所帮助 - 所有ifs都是false，testX和testY是圆心的坐标。 return语句中的测试使用Pythagorean定理来确定测试点是否在圆的半径范围内。