Canvas Games: Part II - HTML5 Canvas - page 790

The Playfield

The game playfield is a 15×15 grid of 32×32 tiles. This is a total of 225 tiles with a width and
heightof480pixelseach.Everytimewestartanewgame,alltheobjectsareplacedrandomly
on the grid. The playField[] array holds 15 row arrays each with 15 columns. This gives us
225 tiles that can be easily accessed with the simple playField[row][col] syntax.

We first place a road tile on each of the 225 playField array locations. We then randomly
place all the wall tiles. (These actually replace some of the road tiles at locations in the
playField array.)
Next, we randomly place all the enemy tank tiles. Unlike the wall tiles, the tank tiles do not
replace road tiles in the playField array. Instead, they are placed in an array of their own
called enemy .Toensurethatneithertheplayernorthegoalobjectoccupiesthesametilespace
as the enemy tanks, we create another array, items .

The items array is also a 15×15 two-dimensional array of rows and columns, which can be
considered the second layer of playfield data. Unlike the playField array, it is used only
to make sure no two objects (player, enemy, or goal) occupy the same space while building
the playfield. We must do this because the player and enemy objects are not added to the
playField array.

After we have placed the enemy, we randomly place the player at a spot that is not currently
occupied by an enemy or a wall. Finally, we place the goal tile in a spot not taken by the play-
er, a wall, or an enemy tank.

The code for this is in the createPlayField() function. If you would like to review it now,
go to the Micro Tank Maze Complete Game Code section ( Example 9-2 ) .

All the data about the playField is stored in application scope variables:

//playfield
var var playField = [];

var

var items = [];
var var xMin = 0 ;

var var xMax = 480 ;

var

var yMin = 0 ;
var

var yMax = 480 ;

To create the playField , the game code needs to know the maximum number of each type of
tile. These are also application scope variables:

var var wallMax = 25 ;

var

var playerMax = 1 ;