• Choose a category
• All
• Classic-Fiction

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.

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

All the data about the playField will be stored in application scope variables:

//playfield

var playField = [];

var items = [];

var xMin = 0;

var xMax = 480;

var yMin = 0;

var yMax = 480;

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

var wallMax = 20;

var playerMax = 1;

var enemyMax = 20;

var goalMax = 1;

The Player

The player and all of its current attributes will be contained in the player object. Even a game as simple as Micro Tank Maze requires quite a few attributes. Here is a list and description of each:

player.row

The current row on the 15×15 playField grid where the player resides.

player.col

The current column on the 15×15 playField grid where the player resides.

player.nextRow

The row the player will move to next, after a successful key press in that direction.

player.nextCol

The column the player will move to next, after a successful key press in that direction.

player.currentTile

The id of the current tile used to display the player from the playerTiles array.

player.rotation

The player starts pointed up, so this will be the 0 rotation. When the player moves in one of the four basic directions, this rotation will change and will be used to move the player in the direction it is facing.

player.speed

The number of pixels the player object will move on each frame tick.

player.destinationX

The final x location for the 32×32 player object while it is moving to a new tile. It represents the top-left corner x location for this new location. During the player movement and animation phase of the