# 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 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'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.

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:

First, define a circle and a rectangle

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

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

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

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

Step#4: Test for collision at rect corner.

• Think of a line from the rect center to any rect corner
• Now extend that line by the radius of the circle
• If the circle’s center is on that line they are colliding at exactly that rect corner

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

Heres the full code:

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

That's a way to do it:

1) find the corner of the rectangle nearest to the circle center
2) see how the circle is positioned relative to the corner

The function takes a third parameter to allow the distinction between a "solid" rectangle and a simple outline (i.e. whether the case of a circle located entirely inside the rectangle should be considered a collision)

``````function collides (rect, circle, collide_inside)
{
// compute a center-to-center vector
var half = { x: rect.w/2, y: rect.h/2 };
var center = {
x: circle.x - (rect.x+half.x),
y: circle.y - (rect.y+half.y)};

// check circle position inside the rectangle quadrant
var side = {
x: Math.abs (center.x) - half.x,
y: Math.abs (center.y) - half.y};
if (side.x >  circle.r || side.y >  circle.r) // outside
return false;
if (side.x < -circle.r && side.y < -circle.r) // inside
return collide_inside;
if (side.x < 0 || side.y < 0) // intersects side or corner
return true;

// circle is near the corner
return side.x*side.x + side.y*side.y  < circle.r*circle.r;
}

var rect = { x:50, y:50, w:80, h:30 };
var circle = { x:105, y:135, r:16 };

if (collides (rect, circle)) { /* bang! */ }
``````

I have a second function that computes a collision normal vector, to allow animating an circle bouncing off rectangles. Together they serve as a base for this fiddle

``````function bounces (rect, circle)
{
// compute a center-to-center vector
var half = { x: rect.w/2, y: rect.h/2 };
var center = {
x: circle.x - (rect.x+half.x),
y: circle.y - (rect.y+half.y)};

// check circle position inside the rectangle quadrant
var side = {
x: Math.abs (center.x) - half.x,
y: Math.abs (center.y) - half.y};
if (side.x >  circle.r || side.y >  circle.r) // outside
return { bounce: false };
if (side.x < -circle.r && side.y < -circle.r) // inside
return { bounce: false };
if (side.x < 0 || side.y < 0) // intersects side or corner
{
var dx = 0, dy = 0;
if (Math.abs (side.x) < circle.r && side.y < 0)
{
dx = center.x*side.x < 0 ? -1 : 1;
}
else if (Math.abs (side.y) < circle.r && side.x < 0)
{
dy = center.y*side.y < 0 ? -1 : 1;
}

return { bounce: true, x:dx, y:dy };
}
// circle is near the corner
bounce = side.x*side.x + side.y*side.y  < circle.r*circle.r;
if (!bounce) return { bounce:false }
var norm = Math.sqrt (side.x*side.x+side.y*side.y);
var dx = center.x < 0 ? -1 : 1;
var dy = center.y < 0 ? -1 : 1;
return { bounce:true, x: dx*side.x/norm, y: dy*side.y/norm };
}
``````

I found I came across problems with the selected answer. Here's mine that, I think works well:

``````function collisionCheckCircleRect(circle, rect)
{
var distx = Math.abs(circle.x - rect.x);
var disty = Math.abs(circle.y - rect.y);

if (distx > (rect.width/2 + circle.radius)) { return false; }
if (disty > (rect.height/2 + circle.radius)) { return false; }

if (distx <= (rect.width/2)) { return true; }
if (disty <= (rect.height/2)) { return true; }

var hypot = (distx - rect.width/2)*(distx- rect.width/2) +
(disty - rect.height/2)*(disty - rect.height/2);