The Main Game Structure - Building JavaScript Games for Phones, Tablets, and Desktop - page 310

Figure 24-1. The title screen of the Tick Tick game
The PlayingState class maintains the current level and deals with loading and saving level status
(solved/locked), just as in the Penguin Pairs game. The playing state creates Level objects, each of
which contains a tile-based game world, again very similar to the way Penguin Pairs is structured.
The Structure of a Level
Let's first look at what kind of things can be in a level in Tick Tick. First, there is a background image.
For now, you display a simple background sprite; there is no need to store any information about
that in the level data variable. There are also different kinds of blocks the player can jump on, along
with water drops, enemies, the player's starting position, and the end position the player has to
reach. As in the Penguin Pairs game, you store level information in a global variable. This variable is
stored in the local storage so that when the player finishes a level, the browser remembers this the
next time the player is playing the game. Or course, this assumes the player doesn't clear the local
storage in the meantime.
You define a level using tiles, where each tile has a certain type (wall, background, and so on). You
then represent each tile type with a character in the level data variable. Just as in the Penguin Pairs
game, you lay out the level as text in a two-dimensional space corresponding to the playing field.