HTML5 Canvas [153]
//...Leave everything else from Example 8-10 intact here
}
frameRateCounter = new FrameRateCounter();
const FRAME_RATE = 40;
var intervalTime = 1000/FRAME_RATE;
setInterval(runGame, intervalTime );
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 constants:
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:
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 for details.
gameStatePlayerStart()
Fades the player graphic onto the screen from 0 alpha to 1. Once 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. Once 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 for details on 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 for details on this algorithm.
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 remaining, 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