HTML5 Canvas, 2nd Edition

The Tile Sheet for Our Game

Make sure you’ve read Chapter 4 and the Chapter 8 section, A Basic Game Framework, before moving on. Even though Micro Tank Maze is a relatively simple game, it is still quite a few lines of code. We hit the major points, but we don’t have space to discuss every detail.

The tile sheet (tanks_sheet.png) we use looks very familiar if you’ve read Chapter 4. Figure 9-11 shows tanks_sheet.png.

Figure 9-11. The Micro Tank Maze tile sheet

We are using only a very small portion of these tiles for Micro Tank Maze.

Road tile

This is the tile on which the player and the enemy tanks can move. Tile 0, the road tile, is in the top-left corner.

Wall tile

The wall tile causes any tank moving on it to be destroyed. Tile 30, the second-to-last tile on the sheet, is the wall tile.

Goal tile

This is the tile the player must reach to win the game. It is the last tile in the second-to-last row (the phoenix).

Player tiles

The player is made up of the eight green tank tiles. Each tile simulates the tank treads moving from tile to tile.

Enemy tiles

The enemy is made up of the eight blue tank tiles. These tiles animate the tank treads as the tank moves from tile to tile.

Our game code stores the tile IDs needed for each of these game objects in application scope variables:

var playerTiles = [1,2,3,4,5,6,7,8];
var enemyTiles = [9,10,11,12,13,14,15,16];
var roadTile = 0;
var wallTile = 30;
var