Building Games with SVG and Physics - HTML5 Mobile Game Development - page 288

y: 225,
type:'static',
shape: 'polygon'
}));
stage.insert(new Q.Sprite({ w: 50, h:50, x: 300, y: 150 }));
stage.insert(new Q.Sprite({ w: 25, h:25, x: 300, y: 115 }));
stage.each(function() { this.add("physics"); });
stage.insert(new Q.Target({ x: 525, y: 90 }));
stage.insert(new Q.Target({ x: 300, y: 90 }));
stage.insert(new Q.Sprite({ w: 30, h:30, x: 10, y: 210,
color: 'blue' }));
stage.cannon = stage.insert(new Q.Cannon());
stage.viewport(600,400);
stage.centerOn(300,100);
}));
Q.stageScene("level");
As you can see there's not much new here from the previous examples. The touchstart handler has a
little bit of math to calculate the angle of the cannon using atan2 (this was discussed when calculating the
angle of the joypad), but other than that, the event handlers don't have any tricks up their sleeves. They are po-
sitioned outside of the level definition, as the level may be reset (or you might want to define multiple levels),
and in lieu of unbinding the handlers and rebinding, the same handler can be used over and over again provided
it doesn't need any local variables from the scene definition method. To get around this the cannon object is
stored as a property of the stage.
If you have the desire, there's plenty left that could be added to the game, including multiple levels, points,
and a limit on the number of cannonballs the user can fire. You can also use the impulse handler to track the
force of the contact with the targets and remove them only when they are impacted with enough force to prevent
a slowly rolling cannonball from doing damage.
Summary
You covered a lot of ground, learning how to use SVG to create a game with arbitrary shapes and how to wire
those shapes to a 2-D physics engine. There's still lots of details in Box2D, including joints and impulses, that
this chapter didn't cover, but the basics should be enough to build a simple game (or maybe the next Angry
Birds!). SVG is still a spec that's flying a little bit under the radar from a game development perspective. As
soon as performance reaches an acceptable level across devices, you'll likely see a lot more games make use
of SVG given the flexibility it provides to draw arbitrary vector elements with a browser-provided scene graph.
Advanced features like filters and animations are also becoming better supported, so expect to see lots more
cool SVG demos coming in the near future.