不理解碰撞检测代码

Question

我在 Whosebug 上看到了这个关于圆形和矩形之间碰撞检测的主题。

原文post可以在这里找到@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));

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

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

谢谢

Answer 1

好的。所以 dx 就是矩形边缘到圆心的 "horizontal" 距离。 dy同理：是矩形的垂直边缘到圆心的长度。

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

现在你想知道角"sticks"是否入圆

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

对等式两边求平方得到dx^2 + dy^2 <= circle.r^2.

不理解碰撞检测代码

Not understanding collision detection code

javascript

collision-detection

html5-canvas