Combining Bitmaps and Sound - HTML5 Canvas - page 514

if (player.currentTile==playerTiles.length){
player.currentTile = 0;
}
renderPlayField();
if (player.x==player.destinationX && player.y==player.destinationY){
switchGameState(GAME_STATE_EVALUATE_PLAYER_MOVE);
}
First, the player object's x and y locations are increased by the player.speed *
player.dx (or dy ). The tile size is 32 , so we must use a speed value that is evenly divided
into 32 . The values 1, 2, 4, 8, 16, and 32 are all valid.
This function also runs though the playerTiles array on each game loop iteration. This
will render the tank tracks moving, simulating a smooth ride from one tile to the next.
Next, let's take a closer look at how we render the playField .
Rendering Logic Overview
Each time the game renders objects to the screen, it runs through the entire 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 renderPlayField() {
fillBackground();
drawPlayField();
drawPlayer();
drawEnemy();
drawExplosions();
}
First, we draw the plain black background, then we draw the playField , and 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 drawPlayField(){
for (rowCtr=0;rowCtr<15;rowCtr++){
for (colCtr=0;colCtr<15;colCtr++) {
var sourceX = Math.floor((playField[rowCtr][colCtr]) % 8) * 32;
var sourceY = Math.floor((playField[rowCtr][colCtr]) /8) *32;
if (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);
}
}
}