HTML and CSS Reference
In-Depth Information
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 the next level. Check out Figure 14-5 for an in-game screen shot.
Figure 14-5: The final SVG Cannon shooter.
Building the Necessary Sprites
It's time to create the final game code. Open cannon.js and rip out all the existing code. The first pieces
of code needed are the three sprite classes described in the last section: the Q.CannonBall , the Q.Cannon ,
and the Q.Target . Add the code in Listing 14-12 to the top of the cannon.js file, below the initial Quintus
setup code.
Listing 14-12: Cannon sprites
$(function() {
var Q = window.Q = Quintus()
.setup('quintus',{ maximize: true });
Q.CannonBall = Q.Sprite.extend({
init: function(props) {
shape: 'circle',
Search WWH ::

Custom Search