HTML and CSS Reference
In-Depth Information
context
.
restore
();
//pop old state on to screen
}
}
function
function
renderSaucerMissiles
() {
var
var
tempSaucerMissile
=
{};
var
var
saucerMissileLength
=
saucerMissiles
.
length
-
1
;
//ConsoleLog.log("saucerMissiles= " + saucerMissiles.length)
for
for
(
var
var
saucerMissileCtr
=
saucerMissileLength
;
saucerMissileCtr
>=
0
;
saucerMissileCtr
--
){
//ConsoleLog.log("draw player missile " + playerMissileCtr)
tempSaucerMissile
=
saucerMissiles
[
saucerMissileCtr
];
context
.
save
();
//save current state in stack
var
var
sourceX
=
Math
.
floor
(
0
%
4
)
*
tempSaucerMissile
.
width
;
var
var
sourceY
=
Math
.
floor
(
0
/
4
)
*
tempSaucerMissile
.
height
;
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 is also rendered using a bitmap tile sheet, and its code is 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 can use a different-colored particle for each type of explosion. This way, the
rocks, saucers, and player ship can all have uniquely colored explosions.
Thenew
createExplode()
functionhandlesthisbyaddingafinal
type
parametertoitspara-
meter list. Let's look at the code:
function
function
createExplode
(
x
,
y
,
num
,
type
) {
playSound
(
SOUND_EXPLODE
,.
5
);
for
for
(
var
var
partCtr
=
0
;
partCtr
<
num
;
partCtr
++
){
iif
(
particlePool
.
length
>
0
){