检测矩形与圆形的碰撞 [英] 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;
     }
}

这也是我代码的一部分:-

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: 测试矩形角的碰撞.

• 想象一条从矩形中心到任何矩形角的线
• 现在将这条线延长圆的半径
• 如果圆的中心在这条线上，它们就会恰好在那个矩形角处相撞

使用毕达哥拉斯公式比较圆心和矩形中心的距离.

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屋！