As I mentioned in one of the previous code examples earlier, the lack of the commonly used hitTestObject() method from ActionScript 3 in any HTML5 project means that many of these common yet complex pieces of functionality need to be written yourself. In the example Jet Pack game in HTML5, we use one of the more simplistic methods of collision detection by checking over the Players bounding box or the area that the Player takes up and compare it with each one of the LevelBlocks that has been generated. This condition, when simplified, looks something like the following code:
if(
a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y
) {
// 'a' is touching 'b'
}One of the tricky aspects of implementing a functionality like collision detection is that with the advent of the Canvas element in HTML5, there are multiple ways to create and manipulate elements within your...