HTML5 Canvas, 2nd Edition

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 is trying to move to a legal tile on the playField. In Micro Tank Maze, 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:

if (keyPressList[38]==true){
       //up
       if (checkBounds(-1,0, player)){
       setPlayerDestination();
       }
    }else if (keyPressList[37]==true) {
       //left
       if (checkBounds(0,-1, player)){
       setPlayerDestination();
       }
    }else if (keyPressList[39]==true) {
       //right
       if (checkBounds(0,1, player)){
       setPlayerDestination();
       }
    }else if  (keyPressList[40]==true){
       //down
       if (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 ...