O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Collision Detection

Since Impact has built-in collision detection, we can focus on setting up collision relationships instead of creating all the necessary code from scratch. Impact’s collision detection is based on bounding boxes. A bounding box is an imaginary rectangle around a sprite. If a sprite is 16×16 pixels, the box around it would be the same size. During a bounding box collision text, two entity’s boxes are overlapping. This kind of collision detection is incredibly fast and covers a good portion of the use cases you will probably need.

Note

It is important to note that one of the issues with bounding box collision is that it doesn’t take into account any transparent space around your sprite. This is why we had to tweak the size and offset values of our entities to help make our collision look as clean as possible.

Let’s take a look at how we can add collision detection to entities in our game.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required