HTML and CSS Reference
In-Depth Information
<html lang="en">
<meta charset="UTF-8">
<title>Simple Cannon example</title>
<script src='js/jquery.min.js'></script>
<script src='js/underscore.js'></script>
<script src='js/quintus.js'></script>
<script src='js/quintus_input.js'></script>
<script src='js/quintus_sprites.js'></script>
<script src='js/quintus_scenes.js'></script>
<meta name="viewport" content="width=device-width,user-scalable=no">
body { padding:0px; margin:0px; }
#quintus { background-color:#CCC; }
<canvas id='quintus' width='480' height='320'></canvas>
var Q = Quintus().include("Input,Sprites,Scenes")
Because the lander game isn't going to have all that much code, the entire game will be built within the single
lander.html file.
Building the Ship
Now create a basic ship sprite controlled by the keyboard using only force. You extend MovingSprite and
add in a new update method that takes in user input to calculate the new position.
To give the game a small bit of dynamism, set up the ship to show a thruster image when the vertical thrust
is on (see Listing 17-5 ) . Also add in some constraints to prevent the lander from flying off the screen by just
stopping the ship if it flies outside of the Canvas bounds.
This code goes in lander.html before the closing </script> tag.
Listing 17-5: A basic ship class
Q.Ship = Q.MovingSprite.extend({
step: function(dt) {
var p = this.p;
Search WWH ::

Custom Search