HTML and CSS Reference
In-Depth Information
Rendering the Other Game Objects
The rocks, saucers, missiles, and particles are all rendered in a manner similar to the method
implemented for the player ship. Let's first look at the code for the saucer's render function.
Rendering the saucers
The saucers do not have a multiple-cell tile sheet, but to be consistent, we render them as
though they do. This allows us to add more animation tiles for the saucers later:
function
function
renderSaucers
() {
var
var
tempSaucer
=
{};
var
var
saucerLength
=
saucers
.
length
-
1
;
for
for
(
var
var
saucerCtr
=
saucerLength
;
saucerCtr
>=
0
;
saucerCtr
--
){
//ConsoleLog.log("saucer: " + saucerCtr);
tempSaucer
=
saucers
[
saucerCtr
];
context
.
save
();
//save current state in stack
var
var
sourceX
=
0
;
var
var
sourceY
=
0
;
context
.
drawImage
(
saucerTiles
,
sourceX
,
sourceY
,
30
,
15
,
tempSaucer
.
x
,
tempSaucer
.
y
,
30
,
15
);
context
.
restore
();
//pop old state on to screen
}
}
There is no need to calculate the
sourceX
and
sourceY
values for the saucer because the sau-
cer is only a single tile. In this instance, we can just set them to
0
. We have hardcoded the
saucer.width (30)
and
saucer.height (15)
as an example, but with all the rest of the
game objects, we use the object
width
and
height
attributes rather than literals.
Next, let's look at the rock rendering, which varies slightly from both the player ship and the
saucers.
Rendering the rocks
The rock tiles are contained inside three tile sheets based on their size (large, medium, and
small), and we have used only five tiles for each rock. The rocks are square with a symmet-
rical pattern, so we only need to precreate a single quarter-turn rotation for each of the three
sizes.
Here is the
renderRocks()
function. Notice that we must switch based on the scale of the
rock (1=large, 2=medium, 3=small) to choose the right tile sheet to render:
