A game is always in exactly one state
A game state is a named situation the game can be in, such as title screen, playing, paused or game over. A state machine is a short list of the states and the events that move the game from one to the next.
It stops the game doing the wrong thing at the wrong moment, such as moving stars while the player has paused.
By the end of this lesson
Note
I can model a game with states and the events that change them.
Key words
| Word | What it means | Example |
|---|---|---|
| Input | what the player does, such as pressing a key | |
| Event | something that happens at one moment | keydown |
| State | the one situation the game is in now | paused |
| Transition | a move from one state to another | |
| State machine | a table of states, events and the transitions between them |
The cells students fill in are left blank in this preview.
Input sets a flag, and update reads it
A key press is an event, and it happens at its own moment, not once per frame. If the event moved the box directly, the box would move only when a key repeats.
So the event only records what is true: the left key is held, or it is not. The update step reads that flag on every frame and moves the box. Holding a key then gives smooth movement.
Try it: a flag that follows the keys
<p id="out">Click here, then press the arrow keys.</p>Find where the lab game reads its flags
docker exec jupyter grep -n "keys\." game/game.jsShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The update step reads the key flags
grep -n prints each line that holds the text, with its line number. This search prints two lines, 62 and 65. They are the two places the update step reads keys.left and keys.right.
The keydown and keyup handlers are elsewhere in the file. They only set the flags. Moving the box is always the update step's job.
A state machine lists states and events
Most games have more than one situation. The game may be on a title screen, playing, paused or over. In each, the same key means something different. Space might start a game on the title screen and restart it when the game is over.
A state machine keeps one variable, state, and a table. Each row says: in this state, this event leads to that state.
Worked example: a table of transitions
| In this state | This event | Moves to |
|---|---|---|
| title | start | playing |
| playing | pause | paused |
| paused | resume | playing |
| playing | lose | gameover |
| gameover | restart | playing |
The cells students fill in are left blank in this preview.
Find every use of the gameOver flag
docker exec jupyter grep -n "gameOver" game/game.jsShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Two states live in one flag
The search prints six lines. Line 25 declares gameOver. Line 48 sets it to false when a game starts. Line 57 makes the update step do nothing when it is true. Line 83 sets it to true when the lives run out. Line 100 draws the Game over message. Line 122 lets Space start again.
So the lab game has two states, playing and game over, held in one true or false flag. A game with four states needs a name for each.
A common mistake
Warning
Many people use one true or false variable for every situation: isPaused, isOver, isTitle. Then two can be true at once, and the game does not know what to do. One state variable holds exactly one name, so the game is never in two states.