Rectangle Collision Detection for HTML5 Games

Rectangle Rectangle collisions are another very fast collision detection method. It doesn't work for a lot of game types, but it's great for some. Space invaders for instance, is a classic game that rectangle collision detection would work very well for. Just to be clear, we're talking about oriented (rotated) rectangles. We will work on that later.

A Rectangle Collider is also fairly simple. It has a position, and a dimension, both are vector values. We'll create a Rectangle Collider class, as well as a static function in our Colliders class for detecting collisions between the two rectangles.

class cRectangleCollider implements iCollider {
 public position: cVector = new cVector();
 public dimension: cVector = new cVector(1, 1);
 public hitTest(obj: iCollider): boolean {
  if (obj.colliderType == COLLIDER.RECTANGLE) {
   return Collision.RectangleRectangle(this, <cRectangleCollider>obj);
  }
  return false;
 }
 public colliderType: COLLIDER = COLLIDER.RECTANGLE;
}


class Collision {
 public static RectangleRectangle(a: cRectangleCollider, b: cRectangleCollider): boolean {
  var xoverlap: boolean = false;
  var yoverlap: boolean = false;
  if (a.position.x <= b.position.x) {
   if (a.position.x + a.dimension.x >= b.position.x) {
    xoverlap = true;
   }
  }
  else {
   if (b.position.x + b.dimension.x >= a.position.x) {
    xoverlap = true;
   }
  }

  if (a.position.y <= b.position.y) {
   if (a.position.y + a.dimension.y >= b.position.y) {
    yoverlap = true;
   }
  }
  else {
   if (b.position.y + b.dimension.y >= a.position.y) {
    yoverlap = true;
   }
  }

  if (xoverlap == true && yoverlap == true) {
   return true;
  }

  return false;
 }

 public static CircleCircle(a: cCircleCollider, b: cCircleCollider): boolean {
  var _tempVector: cVector = a.position.duplicate();
  _tempVector.subtract(b.position);
  if (_tempVector.magSq() <= (a.radius + b.radius) * (a.radius + b.radius)) {
   return true;
  }
  return false;
 }

}


The algorithm is pretty simple. It's looking for an overlap along the X axis and the Y axis. If there is overlap along both those axes, then there is a collision, if not the rectangles don't collide.

I've added some code to test it. It's similar to what I added to testing the circle colliders. Check out the full source code. To test the rectangle collisions, repeatedly hit the space bar. The rectangles will change randomly and appear red when there is a collision and blue when there is not.

Games

 

More Games

Calculation Solitaire
Colorado Solitaire
Cruel Solitaire
Freecell
Classic Solitaire
Scorpion Solitaire
space invaders
asteroids
sudoku
mathjong
mahjong words
reversi
Pyramid Mahjong
Shell Mahjong
Smiley Mahjong
Starfish Mahjong
Top Heavy Mahjong
Classic Mahjong
Sudoku
Candy Sudoku
Halloween Sudoku
Mermaid Sudoku
Christmas Sudoku
Valentine Sudoku
Candy Mahjong
Christmas Mahjong
Fruit Mahjong
Mermaid Mahjong
Office Mahjong
Valentine Mahjong
Multi Lines Mathjong
Plus Mathjong
Pyramid Mathjong
Shell Mathjong
Smiley Mathjong
Starfish Mathjong
To suggest an improvement, or just say hi, please contact me on twitter :-)

Follow @battagline or  Tweet to @battagline

Thanks,
Rick