HTML5 Canvas [192]
On each iteration, the player.currentTile is incremented by 1. This will change the tile that is rendered to be the next tile in the playerTiles array. When destinationX and destinationY 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 been 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 will be set to true. If the player is on a wall tile, the player.hit will be set to true.
We then loop though all of 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 Overview—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.
This function first uses a little tile-based math to determine where the player is in relation to an enemy tank. It then creates an array of directions to test based on these calculations. It stores these as string values in a variable called directionsToTest.
Next, it uses the chanceRandomMovement value (25%) to determine whether it will use the list of directions it just compiled, or whether it will throw them out and simply choose a random direction to move in.
In either case, it must check all of the available directions (either in the list of directionsToMove 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.
Once it has the direction to move in, it sets the destinationX and destinationY values of the enemy tank using the same tile size * x and tile size * y trick used for the player.
Finally, it sets the game state to GAME_STATE_ANIMATE_ENEMY.
GAME_STATE_ANIMATE_ENEMY
Like GAME_STATE_ANIMATE_PLAYER, this state moves and animates the tank to its new location represented by its destinationX and destinationY values. It must do this for each of the enemy tanks, so it uses the enemyMoveCompleteCount variable to keep count of how many of the enemy tanks have finished their moves.
When all the enemy tanks have completed their moves, the game state is changed to the GAME_STATE_EVALUATE_ENEMY_MOVE state.
GAME_STATE_EVALUATE_ENEMY_MOVE
Like GAME_STATE_EVALUATE_PLAYER_MOVE, this state looks at the location of each tank to determine which ones need to be destroyed.
If a tank occupies the same tile as the player, a wall, or another tank, the tank is “to be destroyed”. If the player and enemy tank occupy the same tile, the player is also “to be destroyed”. This “to be destroyed” state is set by placing true in the hit attribute of the enemy tank or the player.
The game is then moved to the GAME_STATE_EVALUATE_OUTCOME state.
GAME_STATE_EVALUATE_OUTCOME
This function looks at each of the enemy tanks and the player tank to determine which have a hit attribute set to true. If any do, that tank’s dead attribute is set to true, and an explosion is created by calling createExplode() and passing in the object instance (player or enemy tank). In the case of the enemy, a dead enemy is also removed from the enemy array.
The GAME_STATE_ANIMATE_EXPLODE state is called next.
GAME_STATE_ANIMATE_EXPLODE
If the explosions array length is greater than 0, this function loops through each instance and animates them using the explodeTiles array. Each explosion instance is removed from the explosions array after it finishes its animation. When the explosions array length is 0, the game moves to the GAME_STATE_CHECK_FOR_GAME_OVER