HTML and CSS Reference
In-Depth Information
Rendering the Other Game Objects
The rocks, saucers, missiles, and particles will all be 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 will render
them as though they do. This will allow us to add more animation tiles for the saucers
later:
function renderSaucers() {
var tempSaucer = {};
var saucerLength = saucers.length-1;
for (var saucerCtr=saucerLength;saucerCtr>=0;saucerCtr--){
//ConsoleLog.log("saucer: " + saucerCtr);
tempSaucer = saucers[saucerCtr];
context.save(); //save current state in stack
var sourceX = 0;
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 actually calculate the
sourceX
and
sourceY
values for the saucer
because the saucer 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 will 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 separate 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 symmetrical 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:
function renderRocks() {
var tempRock = {};
var rocksLength = rocks.length-1;
for (var rockCtr=rocksLength;rockCtr>=0;rockCtr--){
context.save(); //save current state in stack
