Game Physics - Building JavaScript Games for Phones, Tablets, and Desktop - page 329

representing game objects with basic shapes such as circles , and you check whether they collide
with each other by verifying that the distance between the centers is smaller than the sum of the
radii of the circles.

So this is a first, simple example of doing collision checking in games. Of course, this isn't a very
precise way of checking collisions. The ball may be approximated by the shape of a circle, but the
paint can doesn't look like a circle at all. As a result, in some cases a collision is detected when
there is none, and sometimes a collision isn't detected when the sprites are actually colliding. Still,
many games use simplified shapes such as circles and rectangles to represent objects when they do
collision detection. Because these shapes bind the object within, they're also called bounding circles
and bounding boxes . The Tick Tick game uses axis-aligned bounding boxes, meaning you don't
consider boxes whose sides aren't parallel to the x - and y -axes.

Unfortunately, doing collision detection using bounding boxes isn't always precise enough. When
game objects are close to each other, their bounding shapes may intersect (and thus trigger a
collision), but the actual objects don't. And when a game object is animated, its shape may change
over time. You could make the bounding shape bigger so the object fits in it under all circumstances,
but that would lead to even more false collision triggers.

A solution for this is to check for collisions on a per-pixel basis. Basically, you can write an algorithm
that walks over the non-transparent pixels in the sprite (using a nested for instruction) and checks
whether one or more of these pixels collides with one of the pixels in another sprite (again, by
walking through them using a nested for instruction). Generally, such highly detailed collision
detection is too costly for browser games (even though browsers are becoming faster and faster).
On the other hand, you don't have to perform this rather expensive task very often. It only has to
be done when two bounding shapes intersect. And then you only have to do it for the parts of the
shapes that actually intersect. Furthermore, if you're smart about it, you can decide which kinds of
objects should use per-pixel collision detection so that you only do it for the objects where bounding
boxes don't work well.

When you use circles and rectangles to detect collisions, you need to handle three cases (see also
Figure 26-1 ):

 A circle intersects another circle.

 A circle intersects a rectangle.

 A rectangle intersects another rectangle.

© Springer-Verlag Berlin Heidelberg 2013

Figure 26-1. Different types of collisions: circle-circle, circle-rectangle, and rectangle-rectangle