Blog - Firenibbler Studios

The latest and Greatest from Firenibbler Studios

JS Collision detection Cheat Sheets! learn AABB Box, Circle, and Point detection.

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

One of the biggest problems I have had when making a game is collision detection. I know most engines these days support is, but what if you are using a graphics engine? Or no engine at all? It can be near impossible to find all the algorithms to test every collision you might need! That is why, I have patched together all the functions I use on a regular basis to create a cheat sheet of sorts to help other people find the resources they need.


(adsbygoogle = window.adsbygoogle || []).push({});

AABB Box on Box Collisions

AABB Stands for Axis Aligned Bounding Box. This is the most common form of collision testing. All it needs is an X and Y position, and the Width and Height to calculate if the two objects are colliding.

// Create out function rect1 and rect2 are the objects we will be colliding
function checkCollisionRectRect(rect1, rect2){
// check if they are overlapping
 if (rect1.x <= rect2.x + rect2.width && rect1.x + rect1.width >= rect2.x &&
     rect1.y <= rect2.y + rect2.height && rect1.y + rect1.height > rect2.y) {
  // If they are colliding, return true
  return true;
 } else {
  // If they are not colliding, return false
  return false;
 }
};

Circle on Circle Collisions

These types of collisions are the easiest to understand. Remember the Pythagorean Theorem from grade school? It is basicaly a way to find the length of a segment of a triangle with the other two sides. a^2 + b^2 = c^2 What we will be doing is get the distance between the centers of the circles, and if that is greater then the two radium added together,they are not touching.

// Create out function circle1 and circle2 are the objects we will be colliding
function checkCollisionCircleCircle(circle1, circle2){
// check if they are overlapping
 if (Math.sqrt((circle1.x - circle2.x) * (circle1.x - circle2.x) + 
    (circle1.y - circle2.y) * (circle1.y - circle2.y)) < circle1.radius + circle2.radius) {
  // If they are colliding, return true
  return true;
 } else {
  // If they are not colliding, return false
  return false;
 }
};

AABB Box on Circle Collisions

These types of collisions are much harder to understand It will basically check to see if part of the circle is overlapping part of the Rectangle.

// Create out function rect and circle are the objects we will be colliding
function checkCollisionRectCircle(rect, circle){
 // Get the distance between the two objects
 var distX = Math.abs(circle.x - rect.x - rect.width / 2);
 var distY = Math.abs(circle.y - rect.y - rect.height / 2);

 // Check to make sure it is definitely not overlapping
 if (distX > (rect.width / 2 + circle.radius)) {
  return false;
 }
 if (distY > (rect.height / 2 + circle.radius)) {
  return false;
 }
 // Check to see if it is definitely overlapping
 if (distX <= (rect.width / 2)) {
  return true;
 }
 if (distY <= (rect.height / 2)) {
  return true;
 }

 // Last Resort to see if they are overlapping
 var dx = distX - rect.width / 2;
 var dy = distY - rect.height / 2;
 return (dx * dx + dy * dy <= (circle.radius * circle.radius));
};

AABB Box on Point Collisions

These types of collisions are extreamly easy to program and understand, we just check to see if a coordinate is greater then the far left and top edges, and also less then the bottom and right edges. This type of collision testing is great for mouse pointers, or particles.

// Create out function rect and point are the objects we will be colliding
function checkCollisionRectPoint(rect, point){
 // Check to see if point is within the box
 if(point.x > rect.x&&
    point.x < rect.x = rect.width&& point.y > rect.y&&
    point.y < rect.y + rect.height){
  // return true if they are overlapping
  return true;
 } else {
  // return false if they are not overlapping
  return false;
 }
};

Circle on Point Collisions

This type of collision is just like the Circle on Circle collision, except we only test one radius. This type of collision testing is great for mouse pointers, or particles.

// Create the function circle and point are the objects we will be colliding
function checkCollisionCirclePoint(circle, point){
// check if they are overlapping
 if (Math.sqrt((circle.x - point.x) * (circle.x - point.x) + 
    (circle.y - point.y) * (circle.y - point.y)) < circle.radius) {
  // If they are colliding, return true
  return true;
 } else {
  // If they are not colliding, return false
  return false;
 }
};

I hope these cheat sheets come in handy when programming your games. If you have anything you want me to add, or you yourself want to add just leave a comment!

3 Comments

  1. Hey, thanks for the quick and handy reference! I use these all the time, they are so handy.

    Just wanted to give you a heads up, there is a small error/typo in the checkCollisionRectRect() function. The first condition has a stray “rect2.y” being added to the check which shouldn’t be there.

    Thanks for the write up!

  2. Math.sqrt tends to be slower than the following algorithm:

    // Create out function circle1 and circle2 are the objects we will be colliding
    function checkCollisionCircleCircle(circle1, circle2){
    // check if they are overlapping
    if ((circle1.x – circle2.x) * (circle1.x – circle2.x) +
    (circle1.y – circle2.y) * (circle1.y – circle2.y) < (circle1.radius + circle2.radius) * (circle1.radius + circle2.radius) ) {
    // If they are colliding, return true
    return true;
    } else {
    // If they are not colliding, return false
    return false;
    }
    };

Leave a Reply

Your email address will not be published.

*