HTML and CSS Reference
In-Depth Information
<!DOCTYPE HTML>
<html lang="en">
<head>
<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">
<style>
body { padding:0px; margin:0px; }
#quintus { background-color:#CCC; }
</style>
</head>
<body>
<canvas id='quintus' width='480' height='320'></canvas>
<script>
var Q = Quintus().include("Input,Sprites,Scenes")
.setup()
.controls();
</script>
</body>
</html>
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;
