HTML and CSS Reference
In-Depth Information
Next, we will examine the entire game flow and state machine to give you an overall
look at how the game logic is designed.
Turn-Based Game Flow and the State Machine
Our game logic and flow is separated into 16 discrete states. The entire application runs
on a
40
frames per second interval timer:
switchGameState(GAME_STATE_INIT);
const FRAME_RATE = 40;
var intervalTime = 1000/FRAME_RATE;
setInterval(runGame, intervalTime )
As with the other games, in
Chapter 8
and earlier in this chapter, we will use a function
reference state machine to run our current game state. The
switchGameState()
function will be used to transition to a new game state. Let's begin by discussing
this function briefly, and then moving through the rest of the game functions.
We will not reprint each line of code or dissect it in detail here. Use this
section as a guide for perusing the entire set of game code included at
the end of this chapter (in
Example 9-3
). By now, you have seen most
of the code and ideas used to create this game logic. We will break out
the new ideas and code in the sections that follow.
GAME_STATE_INIT
This state loads in the assets we need for our game. We are loading in only a single tile
sheet and no sounds for
Micro Tank Maze
.
After the initial load, it sends the state machine to the
GAME_STATE_WAIT_FOR_LOAD
state
until the load event has occurred.
GAME_STATE_WAIT_FOR_LOAD
This state simply makes sure that all the items in
GAME_STATE_INIT
have loaded properly.
It then sends the state machine to the
GAME_STATE_TITLE
state.
GAME_STATE_TITLE
This state shows the title screen and then waits for the space bar to be pressed. When
this happens, it sends the state machine to
GAME_STATE_NEW_GAME
.
GAME_STATE_NEW_GAME
This state resets all of the game arrays and objects and then calls the
createPlay
Field()
function. The
createPlayField()
function creates the
playField
and
enemy
ar-
rays for the new game, as well as sets the
player
object's starting location. Once it has
