Combining Bitmaps and Sound - HTML5 Canvas - page 505

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” on page 516
( 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.