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

Question

I'm enrolling in this course and they have this function from their code example and I don't understand how this particular one works.

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);
}

The first four arguments are the x and y position, width and height of the rectangle, while the last three are the x and y position, and the radius of the circle in the canvas.

If the rectangle and circle touch, the function returns true , hence there is a collision.

Answer 1

It appears that testX and testY become the coordinates of the nearest point to the center of the circle enclosed by the rectangle. The four if tests 'clamp' these values to the edges of the rectangle should the center of the circle be outside of it in either dimension. It might help to consider the case where the circle is centered inside the rectangle - all the ifs are false and testX and testY are the coordinates of the circle's center. The test in the return statement uses the Pythagorean Theorem to determine if the test point is within the radius of the circle.