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 wallMax = 25;
var playerMax = 1;
var enemyMax = 20;
var goalMax = 1;
The Player
The player and all its current attributes are contained in the player object. Even a game
as simple as Micro Tank Maze requires quite a few attributes. Here is a list and descrip‐
tion 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 moves to next, after a successful key press in that direction.
player.nextCol
The column the player moves to next, after a successful key press in that direction.
player.currentTile
The id of the current tile that displays the player from the playerTiles array.
player.rotation
The player starts pointed up, so this is the 0 rotation. When the player moves in one
of the four basic directions, this rotation changes and moves the player in the di‐
rection it is facing.
player.speed
The number of pixels the player object moves 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 game, this value determines when the player
has arrived at its new x-axis location.
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.
A Simple Tile-Based Game  |  559
Pdf form data extraction - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extract pdf form data to excel; extract data from pdf file to excel
Pdf form data extraction - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
cannot save pdf form in reader; extracting data from pdf into excel
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 −10, 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 −10, 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 is replaced on the playField by an explosion sprite.
With dead set to true, it is not 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 because 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 has its own set of attributes that are very similar to those of the player.
Like the player, each enemy is 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;
560  |  Chapter 9: Canvas Games: Part II
VB.NET PDF Text Extract Library: extract text content from PDF
control provides text extraction from PDF images and image files. Enable extracting PDF text to another PDF file, and other formats such as TXT and SVG form.
filling out pdf forms with reader; extracting data from pdf files
C# PDF Text Extract Library: extract text content from PDF file in
Image text extraction control provides text extraction from PDF images and image files. Best C#.NET PDF text extraction library and component for free download.
extracting data from pdf to excel; how to save a filled out pdf form in reader
tempEnemy.dx = 0;
tempEnemy.dy = 0;
tempEnemy.hit = false;
tempEnemy.dead = false;
tempEnemy.moveComplete = false;
enemy.push(tempEnemy);
items[randRow][randCol= 1;
A few extra things are worth pointing out in this code. The first is that each enemy object
needs a moveComplete attribute. This is used in the animateEnemy() game state function.
When the entire enemy battalion has moved to its new location, the game transitions
to the next game state. This is discussed in detail in the next section, “Turn-Based Game
Flow and the State Machine” on page 562.
Notice, too, that the new enemy objects are added to the enemy array and to the items
multidimensional array. This ensures that the player and the goal cannot be placed on
an enemy location. After the enemy moves from its initial location, the playField array
still has 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 is 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, because 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 are rendered on top of the playfield when an enemy
tank or the player’s hit attribute has been set to true. The explosion tiles animate
through a list of five tiles and then are 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 examine the entire game flow and state machine to give you an overall look at
how the game logic is designed.
A Simple Tile-Based Game  |  561
VB.NET PDF Image Extract Library: Select, copy, paste PDF images
image extraction from multiple page adobe PDF file in VB.NET. Extract multiple types of image from PDF file in VB.NET, like XObject Image, XObject Form, Inline
extract data from pdf; pdf form field recognition
C# PDF Image Extract Library: Select, copy, paste PDF images in C#
Support PDF Image Extraction from a Page, a Region on a Page Extract various types of image from PDF file, like XObject Image, XObject Form, Inline Image
export excel to pdf form; how to fill pdf form in reader
Turn-Based Game Flow and the State Machine
Our game logic and flow is separated into 16 discrete states. The entire application runs
on a 40-frames-per-second interval timer:
switchGameState(GAME_STATE_INIT);
var FRAME_RATE = 40;
var intervalTime = 1000/FRAME_RATE;
setInterval(runGameintervalTime )
As with the other games, in Chapter 8 and earlier in this chapter, we use a function
reference state machine to run our current game state. The switchGameState() func‐
tion transitions to a new game state. Let’s discuss this function briefly and then move
through the rest of the game functions.
We do not reprint each line of code or dissect it in detail here. Use this
section as a guide for perusing the entire set of game code included at
the end of this chapter (in Example 9-2). By now, you have seen most
of the code and ideas that create this game logic. We break out the new
ideas and code in the sections that follow.
GAME_STATE_INIT
This state loads the assets we need for our game. We are loading only a single tile sheet
and no sounds for Micro Tank Maze.
After the initial load, it sends the state machine to the GAME_STATE_WAIT_FOR_LOAD state
until the load event has occurred.
GAME_STATE_WAIT_FOR_LOAD
This state simply makes sure that all the items in GAME_STATE_INIT have loaded properly.
It then sends the state machine to the GAME_STATE_TITLE state.
GAME_STATE_TITLE
This state shows the title screen and then waits for the space bar to be pressed. When
this happens, it sends the state machine to GAME_STATE_NEW_GAME.
GAME_STATE_NEW_GAME
This  state  resets  all  the  game  arrays  and  objects  and  then  calls  the createPlay
Field() function. The createPlayField() function creates the playField and ene
my arrays for the new game and sets the player object’s starting location. When it has
finished, it calls the renderPlayField() function a single time to display the initial
board on the game screen.
562  |  Chapter 9: Canvas Games: Part II
VB.NET PDF Page Extract Library: copy, paste, cut PDF pages in vb.
VB.NET PDF - PDF File Pages Extraction Guide. Detailed VB.NET Guide for Extracting Pages from Microsoft PDF Doc. Free PDF document
extract table data from pdf to excel; pdf form data extraction
VB.NET PDF Library SDK to view, edit, convert, process PDF file
PDF Text Extraction. Mature and robust APIs are provided for programmers to integrate and perform PDF text extraction feature in .NET windows and web project.
how to extract data from pdf file using java; extract data from pdf table
When this completes, the state machine is now ready to start the real game loop by
moving the game state machine to the GAME_STATE_WAIT_FOR_PLAYER_MOVE state.
GAME_STATE_WAIT_FOR_PLAYER_MOVE
This state waits for the player to press one of the four arrow buttons. When the player
has done so, the switch statement checks which arrow was pressed. Based on the direc‐
tion pressed, the checkBounds() function is called.
This state contains a bit of the new code for tile movement logic that
we have not seen previously in this book. See the upcoming section,
“Simple Tile Movement Logic Overview” on page 566, for more details on
these concepts.
The checkBounds() function accepts three parameters:
• The number to increment the row the player is currently in
• The number to increment the column the player is currently in
• The object being tested (either the player or one of the enemy tanks)
The sole purpose of this function is to determine whether the object being tested can
move in the desired direction. In this game, the only illegal moves are off the side of the
screen. In games such as Pac-Man, this would check to make sure that the tile was not
a wall tile. Our game does not do this because we want the player and the enemy objects
to be able to move mistakenly onto the wall tiles (and be destroyed).
If a valid move is found for the player in the direction pressed, the setPlayerDestina
tion() function is called. This function simply sets the player.destinationX and
player.destinationY attributes based on the new tile location.
checkBounds() sets the  player.nextRow and player.nextCol attributes. The  set
PlayerDestination() function multiplies the player.nextRow and the player.next
Col by the tile size (32) to determine the player.destinationX and player.destina
tionY attributes. These move the player to its new location.
GAME_STATE_ANIMATE_PLAYER is then set as the current game state.
GAME_STATE_ANIMATE_PLAYER
This function moves the player to its destinationX and destinationY locations. Be‐
cause this is a turn-based game, we don’t have to do any other processing while this
movement is occurring.
A Simple Tile-Based Game  |  563
C# PDF File Permission Library: add, remove, update PDF file
Data. Data: Auto Fill-in Field Data. Field: Insert Choose to offer PDF annotation and content extraction Enable or disable copying and form filling functions.
how to flatten a pdf form in reader; extract pdf data into excel
VB.NET PDF File Permission Library: add, remove, update PDF file
Data. Data: Auto Fill-in Field Data. Field: Insert Choose to offer PDF annotation and content extraction Enable or disable copying and form filling functions.
extract data from pdf forms; extract data from pdf using java
On each iteration, the player.currentTile is incremented by 1. This changes the tile
that is rendered to be the next tile in the playerTiles array. When destinationX and
destinationY are equal to the x and y values for the player, the movement and anima‐
tion stop, and the game state is changed to the GAME_STATE_EVALUATE_PLAYER_MOVE
state.
GAME_STATE_EVALUATE_PLAYER_MOVE
Now that the player has moved to the next tile, the player.row and player.col at‐
tributes are set to player.nextRow and player.nextCol, respectively.
Next, if the player is on a goal tile, the player.win attribute is set to true. If the player
is on a wall tile, the player.hit is set to true.
We then loop though all the enemy objects and see whether any occupy the same tile as
the player. If they do, both the player and the enemy hit attributes are set to true.
Next, we move the game to the GAME_STATE_ENEMY_MOVE state.
GAME_STATE_ENEMY_MOVE
This state uses the homegrown chase AI—discussed in “Simple Homegrown AI Over‐
view”—to choose a direction in which to move each enemy tank. It does this by looping
through all the tanks and applying the logic to them individually.
This function first uses a little tile-based math to determine where the player is in relation
to an enemy tank. It then creates an array of directions to test based on these calculations.
It stores these as string values in a directionsToTest variable.
Next, it uses the chanceRandomMovement value (25%) to determine whether it will use
the list of directions it just compiled or throw them out and simply choose a random
direction to move in.
In either case, it must check all the available directions (either in the list of direction
sToMove or in all four directions for random movement) to see which is the first that
will not move the tank off the side of the screen.
When it has the direction to move in, it sets the destinationX and destinationY values
of the enemy tank, using the same tile size * x and tile size * y trick used for
the player.
Finally, it sets the game state to GAME_STATE_ANIMATE_ENEMY.
GAME_STATE_ANIMATE_ENEMY
Like GAME_STATE_ANIMATE_PLAYER, this state moves and animates the tank to its new
location represented by its destinationX and destinationY values. It must do this for
564  |  Chapter 9: Canvas Games: Part II
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
Merge Microsoft Office Word, Excel and PowerPoint data to PDF form. PDF page deleting, PDF document splitting, PDF page reordering and PDF page image and
vb extract data from pdf; pdf data extraction to excel
VB.NET PDF Password Library: add, remove, edit PDF file password
passwordSetting.IsAnnot = True ' Allow to fill form. passwordSetting.IsFillForm = True ' Content extraction is allowed. True ' Add password to PDF file.
extract data from pdf form; pdf data extraction open source
each of the enemy tanks, so it uses the enemyMoveCompleteCount variable to keep count
of how many of the enemy tanks have finished their moves.
When all the enemy tanks have completed their moves, the game state is changed to the
GAME_STATE_EVALUATE_ENEMY_MOVE state.
GAME_STATE_EVALUATE_ENEMY_MOVE
Like GAME_STATE_EVALUATE_PLAYER_MOVE, this state looks at the location of each tank
to determine which ones need to be destroyed.
If a tank occupies the same tile as the player, a wall, or another tank, the tank is “to be
destroyed.” If the player and enemy tank occupy the same tile, the player is also “to be
destroyed.” This “to be destroyed” state is set by placing true in the hit attribute of the
enemy tank or the player.
The game is then moved to the GAME_STATE_EVALUATE_OUTCOME state.
GAME_STATE_EVALUATE_OUTCOME
This function looks at each of the enemy tanks and the player tank to determine which
have a hit attribute set to true. If any do, that tank’s dead attribute is set to true, and
an explosion is created by calling createExplode() and passing in the object instance
(player or enemy tank). In the case of the enemy, a dead enemy is also removed from
the enemy array.
The GAME_STATE_ANIMATE_EXPLODE state is called next.
GAME_STATE_ANIMATE_EXPLODE
If the explosions array length is greater than 0, this function loops through each in‐
stance and animates it, using the explodeTiles array. Each explosion instance is re‐
moved from the explosions array after it finishes its animation. When the explosions
array length is 0, the game moves to the GAME_STATE_CHECK_FOR_GAME_OVER state.
GAME_STATE_CHECK_FOR_GAME_OVER
This state first checks whether the player is dead and then checks to see whether she has
won. The player cannot win if an enemy tank makes it to the goal on the same try as
the player.
If the player has lost, the state changes to GAME_STATE_PLAYER_LOSE; if the player has
won, it moves to the GAME_STATE_PLAYER_WIN state. If neither of those has occurred,
the game is set to GAME_STATE_WAIT_FOR_PLAYER_MOVE. This starts the game loop iter‐
ation over, and the player begins her next turn.
A Simple Tile-Based Game  |  565
GAME_STATE_PLAYER_WIN
If the player wins, the maxEnemy is increased for the next game. The player’s score is
also checked against the current session high score to determine whether a new high
score has been achieved. This state waits for a space bar press and then moves to the
GAME_STATE_NEW_GAME state.
GAME_STATE_PLAYER_LOSE
The player’s score is checked against the current session high score to determine whether
a new high score has been achieved. This state waits for a space bar press and then moves
to the GAME_STATE_NEW_GAME state.
Simple Tile Movement Logic Overview
Micro Tank Maze employs simple tile-to-tile movement by using the “center of a tile”
logic. This logic relies on making calculations when the game character has reached the
center of a tile. The origin point of our game character tiles is the top-left corner. Because
of this, we can easily calculate that a game character is in the center of a tile when its x
and y coordinates are equal to the destination tile’s x and y coordinates.
When the user presses a movement key (up, down, right, or left arrow), we first must
check whether the player is trying to move to a legal tile on the playField. In Micro
Tank Maze, all tiles are legal. The only illegal moves are off the edges of the board. So,
if the player wants to move up, down, left, or right, we must first check the tile in that
direction based on the key pressed in the gameStateWaitForPlayerMove() function.
Here is the switch statement that determines whether the player pressed an arrow key:
if (keyPressList[38]==true){
//up
if (checkBounds(-1,0, player)){
setPlayerDestination();
}
}else if (keyPressList[37]==true) {
//left
if (checkBounds(0,-1, player)){
setPlayerDestination();
}
}else if (keyPressList[39]==true) {
//right
if (checkBounds(0,1player)){
setPlayerDestination();
}
}else if  (keyPressList[40]==true){
//down
if (checkBounds(1,0player)){
setPlayerDestination();
}
}
566  |  Chapter 9: Canvas Games: Part II
Notice that  the checkBounds()  function takes  a row increment and then  a column
increment to test. It is important to note that we don’t access tiles in the same manner
we would access pixels on the screen. Tiles in the playField array are accessed by
addressing the vertical (row) and then the horizontal (column) (using [row][column],
not [column][row]). This is because a simple array is organized into a set of rows. Each
row has a set of 15 columns. Therefore, we do not access a tile in playField by using
the [horizontal][vertical] coordinates. Instead, we use the [row][column] syntax
that simple arrays use to powerful and elegant effect.
In the checkBounds() function, enter the row increment, then the column increment,
and then the object to be tested. If this is a legal move, the checkBounds() function sets
nextRow and nextCol to be row+rowInc and col+colInc, respectively:
function checkBounds(rowInccolIncobject){
object.nextRow = object.row+rowInc;
object.nextCol = object.col+colInc;
if (object.nextCol >=0 && object.nextCol<15 &&
object.nextRow>=0 && object.nextRow<15){
object.dx = colInc;
object.dy = rowInc;
if (colInc==1){
object.rotation = 90;
}else if (colInc==-1){
object.rotation = 270;
}else if (rowInc==-1){
object.rotation = 0;
}else if (rowInc==1){
object.rotation = 180;
}
return(true);
}else{
object.nextRow = object.row;
object.nextCol = object.col;
return(false);
}
}
If the move is legal, the dx (delta, or change in x) and dy (delta, or change in y) are set
to colInc and rowInc, respectively.
The animatePlayer() function is called next. Its job is to move the player object to its
new location while running through its animation frames. Here is the code from the
animatePlayer() function:
A Simple Tile-Based Game  |  567
player.x += player.dx*player.speed;
player.currentTile++;if (player.currentTile==playerTiles.length){
player.currentTile = 0;
}
renderPlayField();
if (player.x==player.destinationX && player.y==player.destinationY){
switchGameState(GAME_STATE_EVALUATE_PLAYER_MOVE);
}
First, the player object’s x and y locations are increased by the player.speed * play
er.dx (or dy). The tile size is 32, so we must use a speed value that is evenly divided into
32. The values 124816, and 32 are all valid.
This function also runs though the playerTiles array on each game loop iteration. This
renders the tank tracks moving, simulating a smooth ride from one tile to the next.
Next, let’s take a closer look at how we render playField.
Rendering Logic Overview
Each time the game renders objects to the screen, it runs through the entire render()
function. It does this to ensure that even the nonmoving objects are rendered back to
the game screen. The render() function looks like this:
function renderPlayField() {
fillBackground();
drawPlayField();
drawPlayer();
drawEnemy();
drawExplosions();
}
First, we draw the plain black background, and then we draw playField. After that, we
draw the game objects. drawPlayField() draws the map of tiles to the game screen.
This function is similar to the functions in Chapter 4 but with some additions for our
game. Let’s review how it is organized:
function drawPlayField(){
for (rowCtr=0;rowCtr<15;rowCtr++){
for (colCtr=0;colCtr<15;colCtr++) {
var sourceX = Math.floor((playField[rowCtr][colCtr]) % 8* 32;
var sourceY = Math.floor((playField[rowCtr][colCtr]) /8*32;
if (playField[rowCtr][colCtr!= roadTile){
context.drawImage(tileSheet00,32,32,colCtr*32,rowCtr*32,32,32);
}
context.drawImage(tileSheetsourceXsourceY32,32,
colCtr*32,rowCtr*32,32,32);
}
568  |  Chapter 9: Canvas Games: Part II
Documents you may be interested
Documents you may be interested