Combining Bitmaps and Sound - HTML5 Canvas - page 504

Our game code will store 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 goalTile = 23;
var explodeTiles = [17,18,19,18,17];
The tile sheet will be loaded into an application scope Image instance and given the
name tileSheet :
var tileSheet;
In the application's initialization state, we will load in and assign the Image instance:
tileSheet = new Image();
tileSheet.src = "tanks_sheet.png";
Next, we will examine the setup of the game playfield.
The Playfield
The game playfield will be a 15×15 grid of 32×32 tiles. This is a total of 225 tiles with
a width and height of 480 pixels each. Every time we start a new game, all the objects
will be placed randomly onto the grid. The playField[] array will hold 15 row arrays
each with 15 columns. This gives us 225 tiles that can be easily accessed with the simple
playField[row][col] syntax.
Creating the board
We will first place a road tile on each of the 225 playField array locations. We then
randomly place all of the wall tiles (these will actually replace some of the road tiles at
locations in the playField array).
Next, we randomly place all of the enemy tank tiles. Unlike the wall tiles, the tank tiles
will not replace road tiles in the playField array. Instead, they will be placed into an
array of their own called enemy . To ensure that neither the player nor the goal object
occupies the same tile space as the enemy tanks, we will create another array called
items .
The items array will also be 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
will only be used 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.
Once we have placed the enemy, we will randomly place the player at a spot that is not
currently occupied by an enemy or a wall. Finally, we will place the goal tile in a spot
not taken by the player, a wall, or an enemy tank.