41
player.x += player.dx*player.speed;
player.currentTile++;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 * play
er.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
renders 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 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, 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 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);
}
568 | Chapter 9: Canvas Games: Part II
