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.

### 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;
}
};```

• Jack Rugile

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!

• Firenibbler

Thanks for the help! fixing the typo now.

• Joshua Tenner

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) +