Collision detection in html5 canvas

Question

I'm trying to build a game where the user should place the circle inside a vertical bar but I'm having trouble in the collision detection function. Here is my jsfiddle : http://jsfiddle.net/seekpunk/QnBhK/1/

 if (collides(Bluecircle, longStand)) {
    Bluecircle.y = longStand.y2;
    Bluecircle.x = longStand.x2;
 }
 else if (collides(Bluecircle, ShortStand)) {
    Bluecircle.y = ShortStand.y2;
    Bluecircle.x = ShortStand.x2;
 }
function collides(a, bar) {
   return a.x == bar.x1 && a.y == bar.y1;
}

As I see from the code in the question you are comparing the exact ball coordinate to exact wall coordinate. Chances that these coordinates coincide are quite small, try evaluating the fact that ball is inside an area. Or a bar inside a ball radius. Like Math.abs(a.x - bar.x1) < radius — Anton Boritskiy
– Anton Boritskiy, Commented Jan 2, 2014 at 15:12

markE · Accepted Answer · 2014-01-05 04:05:32Z

15

[ Edited to fix a typo and an omission ]

Here's how to hit-test a rectangle and a circle for collision:

Demo: http://jsfiddle.net/m1erickson/n6U8D/

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

[Added answer given clarification]

...And this is how to test if the circle is completely contained in the rectangle

Demo: http://jsfiddle.net/m1erickson/VhGcT/

// return true if the circle is inside the rectangle
function CircleInsideRect(circle,rect){
    return(
        circle.x-circle.r>rect.x &&
        circle.x+circle.r<rect.x+rect.w &&
        circle.y-circle.r>rect.y &&
        circle.y+circle.r<rect.y+rect.h
    )
}

edited Jan 5, 2014 at 4:05

answered Jan 2, 2014 at 16:41

markE

106k11 gold badges174 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

markE Over a year ago

Ouch! It was late when I posted my answer and it had a typo and an omission. Fixed now...Very sorry!

Sora Over a year ago

thank you for this wonderful solution but i still have a question if you don't mind ... your solution can detect the collision perfectly but is there anyway to make that function just detect when the ball enter the parameter of the rectangle in other way when the ball is inside the rectangle and thank you

markE Over a year ago

I'm not sure what you're asking. The function will return false while the ball is not touching the vertical bar and will then return true at the moment it touches the bar. So you will know the moment of collision when the test turns from false to true.

Sora Over a year ago

yeah i understand i'll rephrase my question : is it possible to detect the ball when it's only inside the parameter of the rectangle ?( when the whole ball is just inside the rectangle ) did i make my question clear ?

markE Over a year ago

Ah..clear now! I updated my answer for this new information. Good luck with your project!

Collectives™ on Stack Overflow

Collision detection in html5 canvas

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related