Canvas Games: Part II - HTML5 Canvas - page 805

Rendering Logic Overview

Eachtimethegamerendersobjectstothescreen,itrunsthroughtheentire render() function.
It does this to ensure that even the nonmoving objects are rendered back to the game screen.
The render() function looks like this:

function function renderPlayField () {

fillBackground ();
drawPlayField ();
drawPlayer ();
drawEnemy ();
drawExplosions ();

}

First, we draw the plain black background, and then we draw playField . After that, we draw
the game objects. drawPlayField() draws the map of tiles to the game screen. This function
is similar to the functions in Chapter 4 but with some additions for our game. Let's review
how it is organized:

function function drawPlayField (){

for

for ( rowCtr = 0 ; rowCtr < 15 ; rowCtr ++ ){

for for ( colCtr = 0 ; colCtr < 15 ; colCtr ++ ) {

var

var sourceX = Math . floor (( playField [ rowCtr ][ colCtr ]) % 8 ) * 32 ;
var

var sourceY = Math . floor (( playField [ rowCtr ][ colCtr ]) / 8 ) * 32 ;

iif ( playField [ rowCtr ][ colCtr ] != roadTile ){
context . drawImage ( tileSheet , 0 , 0 , 32 , 32 , colCtr * 32 , rowCtr * 32 , 32 , 32 );

}
context . drawImage ( tileSheet , sourceX , sourceY , 32 , 32 ,
colCtr * 32 , rowCtr * 32 , 32 , 32 );
}

}

}

The drawPlayField() function loops through the rows in the playField array and then
through each column inside each row. If the tile ID number at playField[rowCtr][colCtr]
is a road tile, it simply paints that tile at the correct location on playField . If the tile ID is a
gameobject(notaroadtile),itfirstpaintsaroadtileinthatspotandthenpaintstheobjecttile
in that spot.