• Choose a category
• All
• Classic-Fiction

player.destinationY

The final y location for the 32×32 player object while it is moving to a new tile. It represents the top-left corner y location for this new location. During the player movement and animation phase of the game, this value determines when the player has arrived at its new y-axis location.

player.x

The current x location of the top-left corner of the 32×32 player object.

player.y

The current y location of the top-left corner of the 32×32 player object.

player.dx

The player’s change in x direction on each frame tick while it is animating. This will be -1, 0, or 1, depending on the direction in which the player is moving.

player.dy

The player’s change in y direction on each frame tick while it is animating. This will be -1, 0, or 1, depending on the direction in which the player is moving.

player.hit

Set to true when the player moves to a new square that is occupied by an enemy tank or a wall.

player.dead

When player.hit is true, it will be replaced on the playField by an explosion sprite. With dead set to true, it will not be rendered to the game screen.

player.win

Set to true if the player collects the goal object.

The enemy and the player share many of the same attributes, as they both use the same type of calculations to move about the grid. Now let’s examine how the enemy object is constructed.

The Enemy

Each enemy object will have its own set of attributes that are very similar to those of the player. Like the player, each enemy will be an object instance.

Here is the code from the createPlayField() function that sets up the attributes for a new enemy object:

EnemyLocationFound = true;

var tempEnemy = {};

tempEnemy.row = randRow;

tempEnemy.col = randCol;

tempEnemy.nextRow = 0;

tempEnemy.nextCol = 0;

tempEnemy.currentTile = 0;

tempEnemy.rotation = 0;

tempEnemy.x = tempEnemy.col*32;

tempEnemy.y = tempEnemy.row*32;

tempEnemy.speed = 2;

tempEnemy.destinationX = 0;

tempEnemy.destinationY = 0;

tempEnemy.dx = 0;

tempEnemy.dy = 0;

tempEnemy.hit = false;

tempEnemy.dead = false;

tempEnemy.moveComplete = false;

enemy.push(tempEnemy);

items[randRow][randCol] = 1;

There are a couple extra things worth pointing out in this code. The first is that each enemy object needs an attribute called moveComplete. This is used in the animateEnemy() game state function. When the entire enemy battalion has moved to its new location, the game will transition to the next game state. This is discussed in detail in the next section .

Also, notice that the new enemy objects are added to the enemy array, as well as to the items multidimensional array. This ensures that the player and the goal cannot be placed on to an enemy location. Once the enemy moves from its initial location, the playField array will still have a road tile to show in its place. We call the player and the enemy “moving object” tiles because they can move about the game board. When they move, they must “uncover” the road tile in the spot they were in before moving.

Now let’s take a quick look at the goal tile to solidify your understanding of the difference between the playField and the moving object tiles.

The Goal

The tile id of the goal tile will be stored in the playField array along with the road and wall tiles. It is not considered a separate item because, unlike the player and enemy objects, it does not need to move. As we have described previously, since the enemy and player tiles move on top of the playfield, they are considered moving items and not part of the playfield.

The Explosions

The explosion tiles are unique. They will be rendered on top of the playfield when an enemy tank or the player’s hit attribute has been set to true. The explosion tiles will animate through a list of five tiles and then be removed from the game screen. Again, tiles for the explosion are set in the explodeTiles array:

var explodeTiles = [17,18,19,18,17];

Next, we will examine the entire game flow and state machine to give you