不了解碰撞检测代码

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也是如此：它是从矩形的垂直边缘到圆心的长度。

现在根据毕达哥拉斯的说法，如果你想要长度到矩形的角落（从圆心），你可以得到dx^2 + dy^2的平方根。

现在你想知道角落是否“粘在”圆圈内。

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

对等式的两边进行平方以获得dx^2 + dy^2 <= circle.r^2。