Online Book Reader

Home Category

HTML5 Canvas [154]

By Root 6592 0
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 renderPlayer() 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 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 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 for details on 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.

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 once 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:

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;

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

Return Main Page Previous Page Next Page

®Online Book Reader