HTML and CSS Reference
In-Depth Information
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 de-
stroyed. 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
render
Particles()
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;
}
