Javascript canvas collision detection

Question

I\'m building a game in Javascript using canvas which requires collision detection, in this case if the player sprite hits a box, the player must not be allowed through the

Answer 1

You just want to know if two rectangles overlap?

Here is a bulletproof function for you:

// returns true if there is any overlap
// params: x,y,w,h of two rectangles
function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
  if (w2 !== Infinity && w1 !== Infinity) {
    w2 += x2;
    w1 += x1;
    if (isNaN(w1) || isNaN(w2) || x2 > w1 || x1 > w2) return false;
  }
  if (y2 !== Infinity && h1 !== Infinity) {
    h2 += y2;
    h1 += y1;
    if (isNaN(h1) || isNaN(y2) || y2 > h1 || y1 > h2) return false;
  }
  return true;
}

If your program can be certain that the numbers will always be finite you can use a simpler version:

// returns true if there is any overlap
// params: x,y,w,h of two rectangles
function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
    w2 += x2;
    w1 += x1;
    if (x2 > w1 || x1 > w2) return false;
    h2 += y2;
    h1 += y1;
    if (y2 > h1 || y1 > h2) return false;
  return true;
}

What its doing is finding the where the right side and bottom side of the two rectangles are, then it sees if the second one starts outside of the first one or if the first one starts outside of the second one.

If either rectangle begins after the other one has ended, then there is no collision. Otherwise there must be a collision.