Game States - Building JavaScript Games for Phones, Tablets, and Desktop - page 218

Chapter 16
Game States
In the previous chapter, you programmed the main gameplay elements of the Jewel Jam game.
However, the game as it stands is far from complete. For example, nothing happens when the jewel
cart disappears from the screen. Also, when you start the program, the game immediately begins
without any warning. What is still needed is a way to incorporate menus and overlays in the game so
the player can change settings, get help, or start playing the game. When the player is, for example,
in a menu screen, the type of interaction with the game is very different from when the player is
solving a level or trying to survive as long as possible. When programming a game, you have to think
about how to incorporate these different game states and switch between them.
Modern games have many different game states, such as menus, maps, inventories, splash screens,
intro movies, and much more. This chapter shows how to add different game states to the Jewel
Jam game. Because this game isn't yet very complicated, you can get away with using a few simple
extensions to your current classes. However, game-state management needs to be handled properly
if you want to build a commercial game. In Chapter 20, this topic discusses a software design using
classes that can handle game states in a very nice and generic way.
Adding a Title Screen
One of the first things you can do to make a game more complete is add a title screen. The title
screen allows the player to get ready to play the game instead of being immediately launched into it.
You can extend the JewelJamGameWorld class so that it loads and displays a title screen consisting of
a single image. You create a SpriteGameObject instance for that, assign it the ID ID.title , and add it
to the game world:
var titleScreen = new SpriteGameObject(sprites.title, ID.layer_overlays_2,
ID.title);
this.add(titleScreen);
You assign the layer ID.layer_overlays_2 so you can be sure the title is drawn on top of everything.
But you have to do a little extra work to properly handle input and update the game world, because
you want the game to start only when the title screen is no longer visible. You can do that by adding
225