HTML5 Canvas [176]
To calculate the step value, divide the timeDifference by 1000: 26/1000 = .026.
We multiply this value by the desired fps for our game: .026 * 40 = 1.04
Our step value is 1.04 for the current frame. Because of the deficit in processing time, we want to move each game object slightly more than a frame so there is no surplus or deficit. In the case of no surplus or deficit, the step value would be 1. If there is a surplus, the step value would be less than 1.
This step value will be multiplied to the changes in movement vectors for each object in the update functions. This allows the game to keep a relatively smooth look even when there are fluctuations in the frame rate. In addition, the game will update the screen in a relatively consistent manner across the various browsers and systems, resulting in game play that is relatively consistent for each user.
Here are the new movement vector calculations for each object:
player
player.x += player.movingX*frameRateCounter.step;
player.y += player.movingY*frameRateCounter.step;
playerMissiles
tempPlayerMissile.x += tempPlayerMissile.dx*frameRateCounter.step;
tempPlayerMissile.y += tempPlayerMissile.dy*frameRateCounter.step;
rocks
tempRock.x += tempRock.dx*frameRateCounter.step;
tempRock.y += tempRock.dy*frameRateCounter.step;
saucers
tempSaucer.x += tempSaucer.dx*frameRateCounter.step;
tempSaucer.y += tempSaucer.dy*frameRateCounter.step;
saucerMissiles
tempSaucerMissile.x += tempSaucerMissile.dx*frameRateCounter.step;
tempSaucerMissile.y += tempSaucerMissile.dy*frameRateCounter.step;
particles
tempParticle.x += tempParticle.dx*frameRateCounter.step;
tempParticle.y += tempParticle.dy*frameRateCounter.step;
We have now covered all of the major changes to turn Geo Blaster Basic into Geo Blaster Extended. Let’s look at Example 9-1, which has the entire code for the final game.
Geo Blaster Extended Full Source
Example 9-1. Geo Blaster Extended full source code listing
-->