Canvas Games: Part II - HTML5 Canvas - page 799

GAME_STATE_ANIMATE_PLAYER
This function moves the player to its destinationX and destinationY locations. Because
this is a turn-based game, we don't have to do any other processing while this movement is
occurring.
On each iteration, the player.currentTile is incremented by 1 . This changes the tile that
is rendered to be the next tile in the playerTiles array. When destinationX and destin-
ationY are equal to the x and y values for the player, the movement and animation stop, and
the game state is changed to the GAME_STATE_EVALUATE_PLAYER_MOVE state.
GAME_STATE_EVALUATE_PLAYER_MOVE
Now that the player has moved to the next tile, the player.row and player.col attributes
are set to player.nextRow and player.nextCol , respectively.
Next, if the player is on a goal tile, the player.win attribute is set to true . If the player is on
a wall tile, the player.hit is set to true .
We then loop though all the enemy objects and see whether any occupy the same tile as the
player. If they do, both the player and the enemy hit attributes are set to true .
Next, we move the game to the GAME_STATE_ENEMY_MOVE state.
GAME_STATE_ENEMY_MOVE
This state uses the homegrown chase AI—discussed in “Simple Homegrown AI Over-
view”—to choose a direction in which to move each enemy tank. It does this by looping
through all the tanks and applying the logic to them individually.
Thisfunctionfirstusesalittletile-basedmathtodeterminewheretheplayerisinrelationtoan
enemy tank. It then creates an array of directions to test based on these calculations. It stores
these as string values in a directionsToTest variable.
Next, it uses the chanceRandomMovement value ( 25% ) to determine whether it will use the list
ofdirectionsitjustcompiledorthrowthemoutandsimplychoosearandomdirectiontomove
in.
In either case, it must check all the available directions (either in the list of direction-
sToMove or in all four directions for random movement) to see which is the first that will not
move the tank off the side of the screen.
When it has the direction to move in, it sets the destinationX and destinationY values of
theenemytank,usingthesame tile size * x and tile size * y trickusedfortheplayer.