Canvas Games: Part II - HTML5 Canvas - page 798

game and sets the player object's starting location. When it has finished, it calls the render-
PlayField() function a single time to display the initial board on the game screen.
When this completes, the state machine is now ready to start the real game loop by moving
the game state machine to the GAME_STATE_WAIT_FOR_PLAYER_MOVE state.
GAME_STATE_WAIT_FOR_PLAYER_MOVE
Thisstatewaitsfortheplayertopressoneofthefourarrowbuttons.Whentheplayerhasdone
so, the switch statement checks which arrow was pressed. Based on the direction pressed, the
checkBounds() function is called.
NOTE
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 , for more details on
these concepts.
The checkBounds() function accepts 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).
Ifavalidmoveisfoundfortheplayerinthedirectionpressed,the setPlayerDestination()
function is called. This function simply sets the player.destinationX and play-
er.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 move the player to its new location.
GAME_STATE_ANIMATE_PLAYER is then set as the current game state.