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

Adding Physics to the Example
With the physics component wrapped up, it's time to see the Box2D in action. This can be done fairly simply
by adding the world component to the stage and the physics component to each of the sprites. First, open
cannon.html and add Box2dWeb and the quintus_physics.js file to the HTML file as shown here
(you'll need to grab a copy of Box2dWeb-2.1.a.3.js from the chapter code or download your own version):
<script src='quintus_sprites.js'></script>
<script src='quintus_scenes.js'></script>
<script src='quintus_svg.js'></script>
<script src='Box2dWeb-2.1.a.3.js'></script>
<script src='quintus_physics.js'></script>
<script src='cannon.js'></script>
Update the highlighted code in cannon.js, as shown in Listing 14-11 , to add physics support to the
SVG example.
Listing 14-11: Adding physics to the SVG example
$(function() {
var Q = window.Q = Quintus()
.include('Input,Sprites,Scenes,SVG,Physics')
.svgOnly()
.setup('quintus',{ maximize: true });
Q.scene('level',new Q.Scene(function(stage) {
stage.insert(new Q.Sprite({
x: 100, y: 250, w: 500, h: 50 , type:"static"
}));
stage.insert(new Q.Sprite({
w: 30, h:20, x: 0, y: 100
}));
stage.insert(new Q.Sprite({
r: 30, x: 50, y: 100, shape:'circle'
}));
stage.insert(new Q.Sprite({
x: 120, y: 100, shape: 'polygon', color: "red",
points: [[ 0, 0 ], [ 100, 0 ],[ 120, 25],[ 50, 50]]
}));
stage.add("world");
stage.each(function() { this.add("physics"); });
stage.viewport(400,400);
stage.centerOn(100,200);
$(Q.wrapper).on('touchstart',function(e) {