• Choose a category
• All
• Classic-Fiction

tempSaucerMissile.x,tempSaucerMissile.y,tempSaucerMissile.width,

tempSaucerMissile.height);

context.restore(); //pop old state on to screen

}

}

The particle explosion will also be rendered using a bitmap tile sheet, and its code will be very similar to the code for the projectiles. Let’s examine the particles next.

Rendering the particles

The particles will use the same four-tile parts.png file (as shown in Figure 9-8) that rendered the projectiles. The Geo Blaster Basic game from Chapter 8 used only a single white particle for all explosions. We replace the createExplode() function from this previous game with a new one that will be able to use a different-colored particle for each type of explosion. This way the rocks, saucers, and player ship can all have unique colored explosions.

The new createExplode() function will handle this by adding a final type parameter to its parameter list. Let’s look at the code:

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);

}

}

}

As the particle objects are created in createExplode(), we added a new type attribute to them. When an explosion is triggered in the checkCollisions() function, the call to createExplode() will now include this type value based on the object that was destroyed. Each rock already has a scale parameter that varies from 1 to 3 based on its size. We will use those as our base type value to pass in for the rocks. Now we only need type values for the player and the saucer. For the saucer we will use 0, and for the player we will use 4. We pulled these id values out of the air. We very well could have used 99 for the saucer and 200 for the player. We just could not use 1, 2, or 3 because those values are used for the rocks. The type breakdown looks like this:

Saucer: type=0

Large rock: type=1

Medium rock: type=2

Small rock: type=3

Player: type=4

This type value will need to be used in a switch statement inside the renderParticles() function to determine which of the four tiles to render for a given particle. Let’s examine this function now:

function renderParticles() {

var tempParticle = {};

var particleLength = particles.length-1;

for (var particleCtr=particleLength;particleCtr>=0;particleCtr--){

tempParticle = particles[particleCtr];

context.save(); //save current state in stack

var tile;

console.log("part type=" + tempParticle.type)

switch(tempParticle.type){

case 0: // saucer

tile = 0;

break;

case 1: //large rock

tile = 2

break;

case 2: //medium rock

tile = 3;

break;

case 3: //small rock

tile = 0;

break;

case 4: //player

tile = 1;

break;

}

var sourceX = Math.floor(tile % 4) * tempParticle.width;

var sourceY = Math.floor(tile / 4) * tempParticle.height;

context.drawImage(particleTiles, sourceX, sourceY,

tempParticle.width, tempParticle.height, tempParticle.x,

tempParticle.y,tempParticle.width,tempParticle.height);

context.restore(); //pop old state on to screen

}

In checkCollisions(), we will need to pass the type parameter to the createExplode() function so the type can be assigned to the particles in the explosion. Here is an example of a createExplode() function call used for a rock instance:

createExplode(tempRock.x+tempRock.halfWidth,tempRock.y+tempRock.halfHeight,

10,tempRock.scale);

We pass the tempRock.scale as the final parameter because we are using the rock’s scale as the type.

For a saucer:

createExplode(tempSaucer.x+tempSaucer.halfWidth,

tempSaucer.y+tempSaucer.halfHeight,10,0);