HTML and CSS Reference
In-Depth Information
var
var
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.
Alsonotethatthesearedesignatedas
var
buttheyshouldreallybe
const
.However,becauseInternet
Explorer does not support the use of
const
, we left them as
var
.
The heart of our state machine is the
run()
function, which is called on an interval of every
20 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
function
run
() {
switch
switch
(
appState
) {
ccase STATE_INIT
:
initApp
();
break
break
;
case
case
STATE_LOADING
:
//wait for call backs
break
break
;
case
case
STATE_RESET
:
resetApp
();
break
break
;
case
case
STATE_PLAYING
:
drawScreen
();
break
break
;
}
}
Initializing the game: no global variables
Now that we know a bit about the state machine
varruct
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.
