Professional HTML5 Mobile Game Development

Creating a Cannon Shooter

With physics and SVG in Quintus, you now have all the pieces you need to build a simple physics-based, knock-things-down game. (Box2D, after all, is the 2-D physics engine that powered Angry Birds.)

The fun part of physics-based gameplay is that as a developer you don’t need to do much to get the basic functionality working: The physics engine handles a lot of it for you. The flip side of this, however, is that the physics-based games require a lot of parameter tweaking to be fun and work well.

Planning the Game

Using the physics components built in this chapter, the idea behind the cannon game is quite simple: Throw some round objects around the page trying to hit some small round targets.

The game uses the location of a touch to control the angle of the cannon and release a cannon ball whenever the touch is released. (On a desktop mousemove and mouseup events are used.)

The cannon is a polygon sprite that won’t have the physics component enabled, so it can move and adjust as necessary. It fires Q.CannonBall sprites that have physics enabled, so they can collide with everything else.

Finally, the Q.Target object is just a small, pink ball that has physics turned on. It listens to its contact event and checks if the object it is in contact with is a Q.CannonBall. If it is, it can destroy itself and update the counter of the number of targets left on the page. When that number reaches 0, it restarts the level. In a real game it would be time to move to ...