检测矩形与圆的碰撞 [英] Detecting collision of rectangle with circle

问题描述

实际上，我试图在下面的代码片段中检测矩形与圆的碰撞： -

Actually I am trying to detect thee collision of the Rectangle with the circle in the following piece of code:-

function checkCollision() {
     //checking of the Collision
     if (ry + rh > cy - radius && rx + rw > cx - radius && rx + rw < cx + radius ) {
          dy = -dy;
     }
}

这也是我的代码的一部分： / p>

This is also the part of my code:-

var rx = 50; //distance from the x-axis of the Rect. 
var ry = 50; //distance from the y-axis of the Rect.
var rw = 80; //width of the Rect
var rh = 30; //Height of the Rect.

// Distance to moved of the Rect.
var dx = 2;
var dy = 2;

// Center of the circle from the x-axis and y-axis.
var cx = 105;
var cy = 135;
var radius = 16;
var cx1 = 6;
var cy1 = 6;

任何人都可以帮助我找出错误的原因吗？

Can anyone help me out here to figure out what is wrong?

推荐答案

检测圆形碰撞不是微不足道的（但不是那么复杂）。

Detecting circle-rect collisions is not trivial (but not that complicated either).

@kuroi neko的解决方案是正确的，并且代码将要得到的简单。

@kuroi neko's solution is correct and about as simple as the code is going to get.

幸运的是，你不需要完全理解数学理论使用命中测试函数。

Luckily, you don't need to fully understand the math theory to use the hit-test function.

如果你想了解更多关于函数如何工作的细节，这里是一个使用4个步骤来测试一个圆和一个矩形是否发生碰撞的描述：

If you do want more details about how the function works, here is a description using 4 steps to test if a circle and a rectangle are colliding:

演示： http://jsfiddle.net/m1erickson/n6U8D/

首先，定义一个圆和一个矩形：

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

步骤1：水平（distX / distY）圆心和矩形中心之间的距离

Step#1: Find the vertical & horizontal (distX/distY) distances between the circle’s center and the rectangle’s center

    var distX = Math.abs(circle.x - rect.x-rect.w/2);
    var distY = Math.abs(circle.y - rect.y-rect.h/2);

步骤2：如果距离大于halfCircle + halfRect，那么它们之间的距离太远而不能相互冲突。

Step#2: If the distance is greater than halfCircle + halfRect, then they are too far apart to be colliding

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

步骤3：如果距离小于halfRect，

Step#3: If the distance is less than halfRect then they are definitely colliding

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

步骤4：在直角测试碰撞。

• 考虑从直角中心到任意直角的线条

使用Pythagoras公式比较圆和rect中心之间的距离。

Using Pythagoras formula to compare the distance between circle and rect centers.

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

完整代码：

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

这篇关于检测矩形与圆的碰撞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！