HTML and CSS Reference
In-Depth Information
and then copy over your updated code to the new object to the update for the new object (see
Listing 17-3
). Add
the
MovingSprite
class to the bottom of
quintus_sprites.js
before the final closing brace.
Listing 17-3:
The Quintus MovingSprite class
Q.MovingSprite = Q.Sprite.extend({
init: function(props) {
this._super(_({
vx: 0,
vy: 0,
ax: 0,
ay: 0
}).extend(props));
},
step: function(dt) {
var p = this.p;
p.vx += p.ax * dt;
p.vy += p.ay * dt;
p.x += p.vx * dt;
p.y += p.vy * dt;
this._super(dt);
}
});
The
MovingSprite
class adds in the initial velocity and acceleration to the base properties and then mod-
ifies the
step
method to run an iterative solution.
Implementing Lander
Now put your newfound Forward-Euler sprite class to good use and build a simple physics-based game where
you spelunk around in a moon lander. Why is this a good use of your physics details? Well, unlike other games,
where you generally get to control the velocity of your protagonist directly, in
Lander
-style games, you control
only acceleration, meaning that movements need to be planned out in advance. You have three controls: thrust
left, thrust right, and thrust up. You need to carefully plan your ascent because if you use too much upward
thrust, you'll watch helplessly as your lander crashes into the ceiling.
Bootstrapping the Game
Create a new file called
lander.html
and add the code in
Listing 17-4
to create the basic outline and setup for
your game.
Listing 17-4:
lander.html
