Collision Detection in JavaScript Games

Learn how to code up your own collision detection when you’re writing your own games in JavaScript using the HTML5 Canvas. JavaScript makes it easy and fun.

Background, or why do I need to know this?

When writing your own games, it’s important to understand how basic collision detection works. sure, there are many cool game frameworks for writing your own HTML5 games, such as Phaser.io that have built-in collision detection and using them will almost certainly speed up your time to market. In addition, you get the benefit of leveraging many peoples’ efforts of validating that using external frameworks have been tested and have had (presumably) most of the kinks worked out before you incorporate that code into your project.

However as a curious engineer it’s important to know how things work under the hood. This is especially true when relying on 3rd party libraries as they don’t always work perfectly and you may end up banging your head against the wall trying to figure out what’s wrong with your code. Sometimes it’s the framework’s code that’s not behaving.

Collision Detection in Pew Pew

In Pew Pew, I chose to do the collision detection manually for all the above reasons. I wanted to know exactly what was going on and how everything works, down to the last pixel and line of code. The code snippets below contain three blocks.

The first is a test function to determine if a JavaScript object is real. The tests consist of three checks: If the object, if the object is != null and if the object is !=’undefined’.

[javascript]
function isReal(obj) {
return obj && obj !== “null” && obj !== “undefined”;
}
[/javascript]

The second function actually does the detection. It starts off by calling isReal for each of the two objects passed in to ensure, well, that they’re real. It then does a test to determine if either of the two objects overlap with each other. That’s it!

[javascript]
function collides(a, b) {
if (isReal(a) && isReal(b))
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
else
return false;
}
[/javascript]

The final snippet is an excerpt from Pew Pew’s update() function. For brevity I’ve omitted some code that performs actions taken when a collision is actually detected. However by reading this you should get the point. Basically collision detection is run against every object in both the missile list and the object list. Since missiles will never collide and neither will objects collide with each other, those scenarios don’t warrant the extra computational resources to check for collisions with them.

[javascript]
// Check to see if there is a missile in flight
if (missileList.length > 0) {
objectList.forEach(function (o) {
missileList.forEach(function (m) {
if (collides(o, m)) {
// Act on collisions here
}
});
});
missileList = missileList.filter(checkShouldDelete);
}
// End missiles and Enemy
[/javascript]

As you can see, doing Collision Detection in JavaScript games is not rocket science once you understand a few concepts. And if you follow this, you can roll your own gaming logic that’s easy to understand and debug in case you run into issues.

Drop me a line if you have any questions at info@jsgames.info. Cheers!