//translate the canvas origin to the center of the player
context.translate(x+.5*width,y+.5*height);
context.rotate(angleInRadians);
//drawShip
context.strokeStyle = '#ffffff';
context.beginPath();
//hardcoding in locations
//facing right
context.moveTo(10,10);
context.lineTo(10,0);
context.moveTo(10,1);
context.lineTo(10,10);
context.lineTo(1,1);
context.moveTo(1,1);
context.lineTo(10,10);
context.stroke();
context.closePath();
//restore context
context.restore(); //pop old state on to screen
}
const FRAME_RATE = 40;
var intervalTime = 1000/FRAME_RATE;
gameLoop();
function gameLoop() {
runGame();
window.setTimeout(gameLoopintervalTime);
}
We left out the entire application state machine from Example 8-9 to save space. In
Example 8-10, we are simply showing what the gameStatePlayLevel() function might
look like.
In the section “Putting It All Together” on page 471, we will go into this in greater detail
as we start to build out the entire application.
The FrameRateCounter Object Prototype
Arcade games such as Asteroids and Geo Blaster Basic rely on fast processing and screen
updates to ensure that all game-object rendering and game-play logic are delivered to
the player at a reliable rate. One way to tell whether your game is performing up to par
is to employ the use of a frame rate per second (FPS) counter. Below is a simple one that
can be reused in any game you create on the canvas:
A Basic Game Framework  |  469
Pdf data extraction to excel - 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
extracting data from pdf forms; exporting data from pdf to excel
Pdf data extraction to excel - 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
extract table data from pdf to excel; exporting pdf data to excel
//*** FrameRateCounter  object prototype
function FrameRateCounter() {
this.lastFrameCount = 0;
var dateTemp = new Date();
this.frameLast = dateTemp.getTime();
delete dateTemp;
this.frameCtr = 0;
}
FrameRateCounter.prototype.countFrames=function() {
var dateTemp = new Date();
this.frameCtr++;
if (dateTemp.getTime() >=this.frameLast+1000) {
ConsoleLog.log("frame event");
this.lastFrameCount = this.frameCtr;
this.frameLast = dateTemp.getTime();
this.frameCtr = 0;
}
delete dateTemp;
}
Our game will create an instance of this object and call the countFrames() function on
each frame tick in our update() function. We will write out the current frame rate in
our render() function.
Example 8-11 shows these functions by adding code to Example 8-10. Make sure you
add  the  definition  of  the FrameRateCounter  prototype  object  to  the  code  in
Example 8-10 under the canvasApp() function but before the final <script> tag. Al‐
ternatively, you can place it in its own <script\> tags or in a separate .js file and set the
URL as the src= value of a <script> tag. For simplicity’s sake, we will keep all our code
in a single file.
Example 8-11 contains the definition for our FrameRateCounter object prototype, as
well as the code changes to Example 8-10 that are necessary to implement it.
Example 8-11. The FrameRateCounter is added
function update() {
x = x+movingX;
y = y+movingY;
frameRateCounter.countFrames();
}
function render() {
// draw background and text
context.fillStyle = '#000000';
context.fillRect(00200, 200);
context.fillStyle = '#ffffff';
470  |  Chapter 8: Canvas Games: Part I
VB.NET PDF Text Extract Library: extract text content from PDF
Application. Advanced Visual Studio .NET PDF text extraction control, built in .NET framework 2.0 and compatible with Windows system.
save pdf forms in reader; online form pdf output
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.
using pdf forms to collect data; cannot save pdf form in reader
context.font = '20px sans-serif';
context.textBaseline = 'top';
context.fillText  ("FPS:" + frameRateCounter.lastFrameCount0180);
//...Leave everything else from Example 8-10 intact here
}
frameRateCounter = new FrameRateCounter();
const FRAME_RATE = 40;
var intervalTime = 1000/FRAME_RATE;
gameLoop();
function gameLoop() {
runGame();
window.setTimeout(gameLoopintervalTime);
}
Putting It All Together
We are now ready to start coding our game. First, we will look at the structure of the
game and some of the ideas behind the various algorithms we will employ to create it.
After that, we will present the full source code for Geo Blaster Basic.
Geo Blaster Game Structure
The structure of the game application is very similar to the structure we started to build
earlier in this chapter. Let’s take a closer look at the state functions and how they will
work together.
Game application states
Our game will have seven distinct game application states. We will store these in con‐
stants:
const GAME_STATE_TITLE = 0;
const GAME_STATE_NEW_GAME = 1;
const GAME_STATE_NEW_LEVEL = 2;
const GAME_STATE_PLAYER_START = 3;
const GAME_STATE_PLAY_LEVEL = 4;
const GAME_STATE_PLAYER_DIE = 5;
const GAME_STATE_GAME_OVER = 6;
Game application state functions
Each individual state will have an associated function that will be called on each frame
tick. Let’s look at the functionality for each:
Putting It All Together  |  471
VB.NET PDF Image Extract Library: Select, copy, paste PDF images
Support PDF Image Extraction from a Page, a Region on a Page, and PDF Document in VB.NET Project. DLLs for PDF Image Extraction in VB.NET.
filling out pdf forms with reader; extract data from pdf into excel
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 data from pdf to excel; how to extract data from pdf to excel
gameStateTitle()
Displays the title screen text and waits for the space bar to be pressed before the
game starts.
gameStateNewGame()
Sets up all the defaults for a new game. All of the arrays for holding display objects
are reinitialized—the game level is reset to 0, and the game score is set to 0.
gameStateNewLevel()
Increases the level value by one and then sets the “game knob” values to control
the level difficulty. See the upcoming section “Level Knobs” on page 479 for details.
gameStatePlayerStart()
Fades the player graphic onto the screen from 0 alpha to 1. When this is complete,
level play will start.
gameStatePlayLevel()
Controls the play of the game level. It calls the update() and render() functions,
as well as the functions for evaluating keyboard input for player ship control.
gameStatePlayerDie()
Starts up an explosion at the location where the player ship was when it was hit by
a rock, saucer, or saucer missile. When the explosion is complete (all particles in
the explosion have exhausted their individual life values), it sets the move to the
GAME_STATE_PLAYER_START state.
gameStateGameOver()
Displays the “Game Over” screen and starts a new game when the space bar is
pressed.
Game application functions
Aside from the game application state functions, there are a number of functions we
need for the game to run. Each state function will call these functions as needed:
resetPlayer()
Resets the player to the center of the game screen and readies it for game play.
checkForExtraShip()
Checks to see whether the player should be awarded an extra ship. See the section
“Awarding the Player Extra Ships” on page 481 for details about this algorithm.
checkForEndOfLevel()
Checks to see whether all the rocks have been destroyed on a given level and, if so,
starts up a new level. See the section “Level and Game End” on page 480 for details
about this algorithm.
472  |  Chapter 8: Canvas Games: Part I
C# PDF Image Extract Library: Select, copy, paste PDF images in C#
Document. Support PDF Image Extraction from a Page, a Region on a Page, and PDF Document. C# Project: DLLs for PDF Image Extraction. In
extract pdf data into excel; export pdf data to excel
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.
html form output to pdf; extracting data from pdf into excel
fillBackground()
Fills the canvas with the background color on each frame tick.
setTextStyle()
Sets the base text style before text is written to the game screen.
renderScoreBoard()
Is called on each frame tick. It displays the updated score, number of ships remain‐
ing, and the current FPS for the game.
checkKeys()
Checks the keyPressList array and then modifies the player ship attributes based
on the values found to be true.
update()
Is called from GAME_STATE_PLAY_LEVEL. It in turn calls the update() function for
each individual display object array.
Individual display object update() functions
The unique functions listed below update each different type of display object.
These functions (with the exception of updatePlayer()) will loop through the
respective array of objects associated with its type of display object and update
the x and y values with dx and dy values. The updateSaucer() function contains
the logic necessary to check whether to create a new saucer and whether any
current saucers on the screen should fire a missile at the player.
• updatePlayer()
• updatePlayerMissiles()
• updateRocks()
• updateSaucers()
• updateSaucerMissiles()
• updateParticles()
render()
Is called from GAME_STATE_PLAY_LEVEL. It in turn calls the render() function for
each individual display object array.
Individual display object render() functions
Like the update() functions, the unique functions listed below render each
different type of display object. Again, with the exception of the renderPlay
er() object (because there is only a single player ship), each of these functions
will loop through the array of objects associated with its type and draw them
to the game screen. As we saw when drawing the player ship earlier in this
chapter, we will draw each object by moving and translating the canvas to the
Putting It All Together  |  473
C#: Demos and Sample Codes for Image Content Extraction Using OCR
C# Sample Code for Png Image Text Extraction. This C# OCR demo code illustrates how to extract text from Png and save to png.pdf. // Set the training data path.
pdf data extraction open source; export excel to pdf form
C# PDF File Permission Library: add, remove, update PDF file
Form Process. Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert Choose to offer PDF annotation and content extraction functions.
make pdf form editable in reader; extract data from pdf form fields
point at which we want to draw our logical object. We will then transform our
object (if necessary) and paint the paths to the game screen.
• renderPlayer()
• renderPlayerMissiles()
• renderRocks()
• renderSaucers()
• renderSaucerMissiles()
• renderParticles()
checkCollisions()
Loops through the individual game display objects and checks them for collisions.
See the section “Applying Collision Detection” on page 481 for a detailed discussion
of this topic.
firePlayerMissile()
Creates a playerMissile object at the center of the player ship and fires it in the
direction the player ship is facing.
fireSaucerMissile()
Creates a saucerMissile object at the center of the saucer and fires it in the direction
of the player ship.
playerDie()
Creates an explosion for the player by calling createExplode(), as well as changing
the game application state to GAME_STATE_PLAYER_DIE.
createExplode()
Accepts in the location for the explosion to start and the number of particles for
the explosion.
boundingBoxCollide()
Determines whether the rectangular box that encompasses an object’s width and
height is overlapping the bounding box of another object. It takes in two logical
display objects as parameters and returns true if they are overlapping and false if
they are not. See the section “Applying Collision Detection” on page 481 for details
about this function.
splitRock()
Accepts in the scale and x and y starting points for two new rocks that will be created
if a large or medium rock is destroyed.
addToScore()
Accepts in a value to add to the player’s score.
474  |  Chapter 8: Canvas Games: Part I
VB.NET PDF File Permission Library: add, remove, update PDF file
Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert, Delete, Update Choose to offer PDF annotation and content extraction functions.
extract pdf form data to excel; extract data from pdf forms
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 document splitting, PDF page reordering and PDF page image and text extraction.
vb extract data from pdf; extract table data from pdf
Geo Blaster Global Game Variables
Now let’s look at the entire set of game application scope variables needed for our game.
Variables that control screen flow
These variables will be used when the title and “Game Over” screens first appear.
They will be set to true after the screen is drawn. When these variables are true,
the screens will look for the space bar to be pressed before moving on to the next
application state:
var titleStarted = false;
var gameOverStarted = false;
Game environment variables
These variables set up the necessary defaults for a new game. We will discuss the
extraShipAtEach and extraShipsEarned in the section “Awarding the Player Extra
Ships” on page 481:
var score = 0;
var level = 0;
var extraShipAtEach = 10000;
var extraShipsEarned = 0;
var playerShips = 3;
Playfield variables
These variables set up the maximum and minimum x and y coordinates for the
game stage:
var xMin = 0;
var xMax = 400;
var yMin = 0;
var yMax = 400;
Score value variables
These variables set the score value for each of the objects the player can destroy:
var bigRockScore = 50;
var medRockScore = 75;
var smlRockScore = 100;
var saucerScore = 300;
Rock size constants
These variables set up some human-readable values for the three rock sizes, allowing
us to simply use the constant instead of a literal value. We can then change the literal
value if needed:
const ROCK_SCALE_LARGE = 1;
const ROCK_SCALE_MEDIUM = 2;
const ROCK_SCALE_SMALL = 3;
Putting It All Together  |  475
Logical display objects
These variables set up the single player object and arrays to hold the various other
logical display objects for our game. See the upcoming sections “The Player Ob‐
ject” on page 476 and “Arrays of Logical Display Objects” on page 477 for further details
about each:
var player = {};
var rocks = [];
var saucers = [];
var playerMissiles = [];
var particles = []
var saucerMissiles = [];
Level-specific variables
The level-specific variables handle the difficulty settings when the game level in‐
creases. See the section “Level Knobs” on page 479 for more details about how these
are used:
var levelRockMaxSpeedAdjust = 1;
var levelSaucerMax = 1;
var levelSaucerOccurrenceRate = 25
var levelSaucerSpeed = 1;
var levelSaucerFireDelay = 300;
var levelSaucerFireRate = 30;
var levelSaucerMissileSpeed = 1;
The Player Object
The player object contains many of the variables we encountered earlier in this chapter
when we discussed animating, rotating, and moving the player ship about the game
screen. We have also added in three new variables that you have not seen before:
player.maxVelocity = 5;
player.width = 20;
player.height = 20;
player.halfWidth = 10;
player.halfHeight = 10;
player.rotationalVelocity = 5
player.thrustAcceleration = .05;
player.missileFrameDelay = 5;
player.thrust = false;
The new variables are halfWidth, halfHeight, and missileFrameDelayhalfWidth
and halfHeight simply store half the width and half the height values, so these need
not be calculated on each frame tick in multiple locations inside the code. The missile
FrameDelay variable contains the number of frame ticks the game will count between
firing player missiles. This way, the player cannot simply fire a steady stream of ordnance
and destroy everything with little difficulty.
476  |  Chapter 8: Canvas Games: Part I
The player.thrust variable will be set to true when the player presses the up key.
Geo Blaster Game Algorithms
The game source code covers a lot of ground that we did not touch on earlier in this
chapter. Let’s discuss some of those topics now; the rest will be covered in detail in
Chapter 9.
Arrays of Logical Display Objects
We have used arrays to hold all our logical display objects, and we have an array for each
type of object (rockssaucers, playerMissilessaucerMissiles, and particles).
Each logical display object is a simple object instance. We have created a separate func‐
tion to draw and update each of our objects.
The use of an object class prototype similar to FrameRateCounter can
be implemented easily for the various display object types. To conserve
space, we have not implemented them in this game. However, these
objects would allow us to separate the update and draw code from the
current common functions and then place that code into the individual
object prototypes. We have included a Rock prototype at the end of this
chapter as an example. (See Example 8-13.)
You will notice that saucers and rocks are drawn with points in the same manner as the
player ship.
Rocks
The rocks will be simple squares that rotate clockwise or counterclockwise. The rock
instances will be in the rocks array. When a new level starts, these will all be created in
the upper-right corner of the game screen.
Here are the variable attributes of a rock object:
newRock.scale = 1;
newRock.width = 50;
newRock.height = 50;
newRock.halfWidth = 25;
newRock.halfHeight = 25;
newRock.x
newRock.y
newRock.dx
newRock.dy
newRock.scoreValue = bigRockScore;
newRock.rotation = 0;
Geo Blaster Game Algorithms  |  477
The rock scale will be set to one of the three rock-scale constants discussed earlier.
halfWidth and halfHeight will be set based on the scale, and they will be used in
calculations in the same manner as the player object versions. The dx and dy values
represent the values to apply to the x and y axes when updating the rock on each frame
tick.
Saucers
Unlike Atari’s Asteroids game, which has both small and large saucers, we are going to
have only one size in Geo Blaster Basic. It will be stored in the saucers array. On a 28×13
grid (using paths), it looks like Figure 8-6.
Figure 8-6. The saucer design
The variable attributes of the saucer object are very similar to the attributes of a rock
object, although without the rock scale attribute. Also, saucers don’t have a rotation; it
is always set at 0. The saucer also contains variables that are updated on each new level
to make the game more challenging for the player. Here are those variables, which will
be discussed in more detail in the upcoming section “Level Knobs” on page 479:
newSaucer.fireRate = levelSaucerFireRate;
newSaucer.fireDelay = levelSaucerFireDelay;
newSaucer.fireDelayCount = 0;
newSaucer.missileSpeed = levelSaucerMissileSpeed;
Missiles
Both the player missiles and saucer missiles will be 2×2-pixel blocks. They will be stored
in the playerMissiles and saucerMissiles arrays, respectively.
The objects are very simple. They contain enough attributes to move them across the
game screen and to calculate life values:
newPlayerMissile.dx = 5*Math.cos(Math.PI*(player.rotation)/180);
newPlayerMissile.dy = 5*Math.sin(Math.PI*(player.rotation)/180);
newPlayerMissile.x = player.x+player.halfWidth;
newPlayerMissile.y = player.y+player.halfHeight;
newPlayerMissile.life = 60;
newPlayerMissile.lifeCtr = 0;
newPlayerMissile.width = 2;
newPlayerMissile.height = 2;
478  |  Chapter 8: Canvas Games: Part I
Documents you may be interested
Documents you may be interested