HTML5 Canvas Collision between circle and rectangle

Question

Possible Duplicate:
Circle-Rectangle collision detection (intersection)
Collision detection between a line and a circle in JavaScript

This is more pseudo than actual working code...

var dX = rectanlge.x - circle.x;
var dY = rectangle.y - circle.y;
var distance = Math.sqrt((dX*dX)+(dY*dY));
if(distance < circle.radius){
     //Collision
}

This is all I have so far to detect whether a circle and rectangle collide in a canvas animation. I am clearly going wrong, can some one point me in the right direction?

rectangles = [];    
var rectangle = function(x,y,width,height){
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
        };

Then I would loop through this array

How is your `rectangle` defined? – Xymostech Dec 04 '12 at 22:41 — Xymostech, Dec 04 '12 at 22:41
For starters, you have `rectanlge` instead of `rectangle`. – Brandon Dec 04 '12 at 23:41 — Brandon, Dec 04 '12 at 23:41

score 2 · Accepted Answer · answered Dec 04 '12 at 22:53

2

You will find very nice algorithm there: http://www.migapro.com/circle-and-rotated-rectangle-collision-detection/

answered Dec 04 '12 at 22:53

kwicher

2,092
1
19
28

HTML5 Canvas Collision between circle and rectangle

1 Answers1