Canvas Games: Part II - HTML5 Canvas - page 802

Simple Tile Movement Logic Overview

Micro Tank Maze employs simple tile-to-tile movement by using the “center of a tile” logic.
This logic relies on making calculations when the game character has reached the center of a
tile. The origin point of our game character tiles is the top-left corner. Because of this, we can
easily calculate that a game character is in the center of a tile when its x and y coordinates are
equal to the destination tile's x and y coordinates.
When the user presses a movement key (up, down, right, or left arrow), we first must check
whether the player istrying tomove toalegal tile onthe playField .In Micro TankMaze ,all
tiles are legal. The only illegal moves are off the edges of the board. So, if the player wants
to move up, down, left, or right, we must first check the tile in that direction based on the key
pressed in the gameStateWaitForPlayerMove() function. Here is the switch statement that
determines whether the player pressed an arrow key:

iif ( keyPressList [ 38 ] == true true ){

//up
iif ( checkBounds ( - 1 , 0 , player )){
setPlayerDestination ();
}
} else

else iif ( keyPressList [ 37 ] == true true ) {

//left
iif ( checkBounds ( 0 , - 1 , player )){
setPlayerDestination ();
}
} else

else iif ( keyPressList [ 39 ] == true true ) {

//right
iif ( checkBounds ( 0 , 1 , player )){
setPlayerDestination ();
}
} else else iif ( keyPressList [ 40 ] == true true ){

//down
iif ( checkBounds ( 1 , 0 , player )){
setPlayerDestination ();
}

}

Notice that the checkBounds() function takes a row increment and then a column increment
to test. It is important to note that we don't access tiles in the same manner we would access
pixels on the screen. Tiles in the playField array are accessed by addressing the vertical
(row) and then the horizontal (column) (using [row][column] , not [column][row] ). This is
because a simple array is organized into a set of rows. Each row has a set of 15 columns.
Therefore, we do not access a tile in playField by using the [horizontal][vertical] co-