HTML5 Canvas [132]
State machine
This game runs using a very simple state machine. A state machine is a construct that allows an application to exist in only one state at a time, which means it is only doing one thing. This kind of construct is great for single-player games because it removes the need to hold a bunch of Booleans describing what is going on at any one moment.
Space Raiders has four states plus a variable named appState that holds the value of the current state. Those states include:
STATE_INIT
A state to set up the loading of assets:
const STATE_INIT = 10;
STATE_LOADING
A wait state that has the application sleep until all assets have been loaded:
const STATE_LOADING = 20;
STATE_RESET
A state to set up the initial game values:
const STATE_RESET = 30;
STATE_PLAYING
A state that handles all game-play logic:
const STATE_PLAYING = 40;
NOTE
A final game of this type might have a few more states, such as STATE_END_GAME and STATE_NEXT_LEVEL, but our case study does not require them.
The heart of our state machine is the run() function, which is called on an interval every 33 milliseconds. The appState variable determines what function to call at any given time using a switch() statement. appState is updated to a different state any time the program is ready to move on and do something else. The process of calling a function such as run() on an interval and switching states is commonly known as a game loop:
function run() {
switch(appState) { case STATE_INIT:
initApp();
break;
case STATE_LOADING:
//wait for call backs
break;
case STATE_RESET:
resetApp();
break;
case STATE_PLAYING:
drawScreen();
break;
}
}
Initializing the game: no global variables
Now that we know a bit about the state machine construct we will use for this game, it’s time to set up the preload for our assets. As we mentioned previously, this game has two sounds, shoot and explode, but it also has three images: a player, an alien, and a missile.
Remember how we kept saying we’d do away with global variables in these applications? Well, here’s where it happens. With the state machine, we now have a mechanism to allow our application to wait for loading assets instead of leveraging only the DOM’s window load event.
In the canvasApp() function, we set up the following variables to use in the game.
The appState variable holds the current state constant:
var appState = STATE_INIT;
We use the loadCount and itemsToLoad variables in exactly the same way we used them in the audio player application—except here we will be loading more items:
var loadCount= 0;
var itemsToLoad = 0;
The variables alienImage, missileImage, and playerImage will hold the loaded images we use in the game:
var alienImage = new Image();
var missileImage = new Image();
var playerImage = new Image();
explodeSound and shootSound will hold the references to the HTMLAudioElement objects we will load:
var explodeSound ;
var shootSound;
The audioType variable will hold the extension of the valid audio file type for the browser displaying the application:
var audioType;
The mouseX and mouseY variables will hold the current x and y location of the mouse:
var mouseX;
var mouseY;
The player variable will hold a dynamic object with the x and y location of the player ship (controlled with the mouse):
var player = {x:250,y:475};
Both the aliens and missiles arrays will hold lists of dynamic objects for displaying aliens and missiles on the canvas:
var aliens = new Array();
var missiles = new Array();
The next five constants set the number of aliens (ALIEN_ROWS, ALIEN_COLS), their starting location (ALIEN_START_X, ALIEN_START_Y), and their spacing on screen (ALIEN_SPACING):
const ALIEN_START_X = 25;
const ALIEN_START_Y = 25;
const ALIEN_ROWS = 5;
const ALIEN_COLS = 8;
const ALIEN_SPACING = 40;
Also in the canvasApp() function, we need to set up event handlers for mouseup and mousemove. To create the game loop, we need to set up our interval to call the run() function:
theCanvas.addEventListener("mouseup",eventMouseUp, false);