Combining Bitmaps and Sound - HTML5 Canvas - page 457

context.drawImage(particleTiles, sourceX, sourceY,
tempSaucerMissile.width,tempSaucerMissile.height,
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;partCtr<num;partCtr++){
if (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);
}
}
}