javascript - 不理解碰撞检测代码

Question

我在 Stackoverflow 上发现了这个关于圆形和矩形之间的碰撞检测的主题。

原始帖子可以在这里找到@markE:Detecting collision of rectangle with circle

var circle={x:100,y:290,r:10};
var rect={x:100,y:100,w:40,h:100};

// return true if the rectangle and circle are colliding
function RectCircleColliding(circle,rect){
var distX = Math.abs(circle.x - rect.x-rect.w/2);
var distY = Math.abs(circle.y - rect.y-rect.h/2);

if (distX > (rect.w/2 + circle.r)) { return false; }
if (distY > (rect.h/2 + circle.r)) { return false; }

if (distX <= (rect.w/2)) { return true; } 
if (distY <= (rect.h/2)) { return true; }

var dx=distX-rect.w/2;
var dy=distY-rect.h/2;
    return (dx*dx+dy*dy<=(circle.r*circle.r));
}

有人可以向我解释一下最后一段代码吗？

var dx=distX-rect.w/2;
var dy=distY-rect.h/2;
return (dx*dx+dy*dy<=(circle.r*circle.r));

我真的不明白其背后的数学原理。

也许有人可以发布一张照片来帮助我形象化它？我附上了一张我在试图弄清楚时画的照片。

谢谢

Answer 1

好的。所以dx只是矩形边缘到圆心的“水平”距离。 dy 相同:矩形垂直边到圆心的长度。

现在根据毕达哥拉斯的理论，如果你想要矩形 Angular 的长度(从圆心开始)，你可以取 dx^2 的平方根。 + dy^2 .

现在您想知道 Angular 是否“粘”到圆中。

为此，dx^2+dy^2 的平方根必须小于(或等于)圆的半径。因此:sqrt(dx^2 + dy^2) <= circle.r .

等式两边同时平方，得到dx^2 + dy^2 <= circle.r^2 .