Online Book Reader

Home Category

HTML5 Canvas [176]

By Root 6410 0
between the current frame and the last frame is 26 milliseconds. Our game is running at a deficit of 1 millisecond per frame—this means that the game processing is taking more time than we want it to.

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

CH9EX1: Geo Blaster Extended