Combining Bitmaps and Sound - HTML5 Canvas - page 509

finished, it calls the renderPlayField() function a single time to display the initial board
on the game screen.
Once this completes, the state machine is now ready to start the real game loop. This
is done by moving the game state machine to the GAME_STATE_WAIT_FOR_PLAYER_MOVE
state.
GAME_STATE_WAIT_FOR_PLAYER_MOVE
This state waits for the player to press one of the four arrow buttons. Once the player
has done so, the switch statement checks to see which arrow was pressed. Based on the
direction pressed, the checkBounds() function is called.
This state contains a bit of the new code for tile movement logic that we
have not seen previously in this topic. See the upcoming section “Simple
Tile Movement Logic Overview” on page 512 for more details on these
concepts.
The checkBounds() function accepts in three parameters:
• The number to increment the row the player is currently in
• The number to increment the column the player is currently in
• The object being tested (either the player or one of the enemy tanks)
The sole purpose of this function is to determine whether the object being tested can
move in the desired direction. In this game, the only illegal moves are off the side of
the screen. In games such as Pac-Man , this would check to make sure that the tile was
not a wall tile. Our game does not do this because we want the player and the enemy
objects to be able to move mistakenly onto the wall tiles (and be destroyed).
If a valid move is found for the player in the direction pressed, the setPlayerDestina
tion() function is called. This function simply sets the player.destinationX and
player.destinationY attributes based on the new tile location.
checkBounds() sets the player.nextRow and player.nextCol attributes. The setPlayer
Destination() function multiplies the player.nextRow and the player.nextCol by the
tile size ( 32 ) to determine the player.destinationX and player.destinationY attributes.
These will be used to move the player to its new location.
GAME_STATE_ANIMATE_PLAYER is then set as the current game state.
GAME_STATE_ANIMATE_PLAYER
This function moves the player to its destinationX and destinationY locations. Since
this is a turn-based game, we don't have to do any other processing while this movement
is occurring.