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

Gathering User Input and Finishing the Game
The last bit of the game is simply to grab the user's input to control the angle of the cannon and set up some
blocks and targets in an interesting formation on the page.
The code uses a single listener to move the cannon angle that runs on touchstart and touchmove on a
mobile and mousemove on a desktop. Then the user lifts up their finger or releases the mouse, and the game
fires the cannon at the previously-calculated angle.
Next, the scene is set up with a number of different blocks for the user to knock down and a couple of targets
to aim at. Add the code in Listing 14-13 to the bottom of cannon.js before the final curly brace.
Listing 14-13: The rest of the cannon code
$(Q.wrapper).on('touchstart touchmove mousemove',function(e) {
var stage = Q.stage(0),
cannon = stage.cannon,
touch = e.originalEvent.changedTouches ?
e.originalEvent.changedTouches[0] : e,
point = stage.browserToWorld(touch.pageX,touch.pageY);
var angle = Math.atan2(point.y - cannon.p.y,
point.x - cannon.p.x);
cannon.p.angle = angle * 180 / Math.PI;
e.preventDefault();
});
$(Q.wrapper).on('touchend mouseup',function(e) {
Q.stage(0).cannon.fire();
e.preventDefault();
});
Q.scene('level',new Q.Scene(function(stage) {
targetCount = 0;
stage.add("world");
stage.insert(new Q.Sprite({
x: 250, y: 250, w: 700, h: 50, type:"static"
}))
stage.insert(new Q.Sprite({ w: 10, h:50, x: 500, y: 200 }));
stage.insert(new Q.Sprite({ w: 10, h:50, x: 550, y: 200 }));
stage.insert(new Q.Sprite({ w: 70, h:10, x: 525, y: 170 }));
stage.insert(new Q.Sprite({ w: 10, h:50, x: 500, y: 130 }));
stage.insert(new Q.Sprite({ w: 10, h:50, x: 550, y: 130 }));
stage.insert(new Q.Sprite({ w: 70, h:10, x: 525, y: 110 }));
stage.insert(new Q.Sprite({
points: [[ 0,0 ], [ 50, -50 ],[150, -50],[200,0]],
x: 200,