Playing with Pixels - HTML5 Mobile Game Development - page 330

This limitation is fine for most cases, because you usually just care about what the current state of the game
is, but you're going to keep track of what happened previously for the purposes of replay or time travel (like in
a game such as Braid ); you must put in some extra work and keep track of your history somewhere.
Now it's time to compare your closed form solution with your iterative solution by running both at the same
time. Create a second CanvasSprite called ball2 and update its position using the Forward Euler method
described previously. Add in the code for ball2 , as shown in Listing 17-2 , below the ball1 step method:
Listing 17-2: Modeling a projectile with an iterative solution
var ball2 = new Q.Sprite({
asset: 'cannonball2.png',
x: 0,
vx: 20,
ax: 0,
y: 380,
vy: -100,
ay: 20
});
ball2.step = function(dt) {
var p = this.p;
p.vy += p.ay * dt;
p.x += p.vx * dt;
p.y += p.vy * dt;
}
To get the second ball to appear, you need to update the gameLoop to update both balls as shown here:
Q.gameLoop(function(dt) {
this.clear();
ball1.step(dt);
ball1.draw(this.ctx);
ball2.step(dt);
ball2.draw(this.ctx);
});
Because the second simulation uses an approximation of the solution to the movement equation, you would
expect to see some error slowly creeping in that is in the form of a divergence of the two ships; the actual result
isn't visibly different from the closed form solution. This is a good sign because it means that the approximation
that is used doesn't change the behavior much from the actual solution.
Extracting a Reusable Class
Now it's time to take your existing Quintus Sprite object from Chapter 11, “Bootstrapping the Quintus
Engine: Part III,” and extend it with a modified step method to abstract away your movement methods. The
only changes you need to make are to update the init method to initialize the velocity and acceleration to zero,