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 renderSaucers () {
var tempSaucer = {};
var saucerLength = saucers . length - 1 ;
for ( var
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 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
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
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:
Search WWH ::

Custom Search