HTML and CSS Reference
In-Depth Information
function render() {
// draw background and text
context.fillStyle = '#000000';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#ffffff';
context.font = '20px _sans';
context.textBaseline = 'top';
context.fillText ("FPS:" + frameRateCounter.lastFrameCount, 0, 180);
//...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:
