• Choose a category
• All
• Classic-Fiction

Here is the newly modified createExplode() function in its entirety:

function createExplode(x,y,num,type) {

playSound(SOUND_EXPLODE,.5);

for (var partCtr=0;partCtrif (particlePool.length > 0){

newParticle = particlePool.pop();

newParticle.dx = Math.random()*3;

if (Math.random()<.5){

newParticle.dx* = -1;

}

newParticle.dy = Math.random()*3;

if (Math.random()<.5){

newParticle.dy* = -1;

}

newParticle.life = Math.floor(Math.random()*30+30);

newParticle.lifeCtr = 0;

newParticle.x = x;

newParticle.width = 2;

newParticle.height = 2;

newParticle.y = y;

newParticle.type = type;

//ConsoleLog.log("newParticle.life=" + newParticle.life);

particles.push(newParticle);

}

}

}

The updateParticles() function will loop through the particles instances, update the attributes of each, and then check to see whether the particle’s life has been exhausted. If it has, the function will place the particle back in the pool. Here is the code we will add to updateParticles() to replenish the pool:

if (remove) {

particlePool.push(tempParticle)

particles.splice(particleCtr,1)

}

Adding in a Step Timer

In Chapter 8, we created a simple FrameRateCounter object prototype that was used to display the current frame rate as the game was running. We are going to extend the functionality of this counter to add in a “step timer.” The step timer will use the time difference calculated between frames to create a “step factor.” This step factor will be used when updating the positions of the objects on the canvas. The result will be smoother rendering of the game objects when there are drops in frame rate, as well as keeping relatively consistent game play on browsers and systems that cannot maintain the frame rate needed to play the game effectively.

How the step timer works

We will update the constructor function for FrameRateCounter to accept in a new single parameter called fps. This value will represent the frames per second that we want our game to run:

function FrameRateCounter(fps) {

if (fps == undefined){

this.fps = 40

}else{

this.fps = fps

}

If no fps value is passed in, the value 40 will be used.

We will also add in two new object-level scope variables to calculate the step in our step timer:

this.lastTime = dateTemp.getTime();

this.step = 1;

The lastTime variable will contain the time in which the previous frame completed its work.

We calculate the step by comparing the current time value with the lastTime value on each frame tick. This calculation will occur in the FrameRateCounter countFrames() function:

FrameRateCounter.prototype.countFrames=function() {

var dateTemp = new Date();

var timeDifference = dateTemp.getTime()-this.lastTime;

this.step = (timeDifference/1000)*this.fps;

this.lastTime = dateTemp.getTime();

The local timeDifference value is calculated by subtracting the lastTime value from the current time (represented by the dateTemp.getTime() return value).

To calculate the step value, divide the timeDifference by 1000 (the number of milliseconds in a single second), and multiply the result by the desired frame rate. If the game is running with no surplus or no deficit in time between frame ticks, the step value will be 1. If the current frame tick took longer than a single frame to finish, the value will be greater than 1 (a deficit). If the current frame took less time than a single frame, the step value will be less than 1 (a surplus).

For example, if the last frame took too long to process, the current frame will compensate by moving each object a little bit more than the step value of 1. Let’s illustrate this with a simple example.

Let’s say we want the saucer to move five pixels to the right on each frame tick. This would be a dx value of 5.

For this example, we will also say that our desired frame rate is 40 FPS. This means that we want each frame tick to use up 25 milliseconds (1000/40 = 25).

Let’s also suppose that the timeDifference