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!

April 30, 2016 at 5:44 am

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!

April 30, 2016 at 6:56 pm

Thanks for the help! fixing the typo now.

May 10, 2016 at 6:58 pm

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;

}

};