Storing and Recalling Game Data - Building JavaScript Games for Phones, Tablets, and Desktop - page 268

This variable describes a Tic Tac Toe game status for two players. The first player has won two
games, and the second player only one. The current state of the game is stored in an array of
strings. Finally, the player who places the x marks has their turn. By editing this variable, you can
very easily change the score or the current state of the game. You could even decide to make the
board bigger, by adding columns and rows to the currentStatus variable. All this can be done
without knowing how the Tic Tac Toe game actually works. A game designer could edit data
structured in this way, and the game could read the data from such a variable and let the player
continue their game. Furthermore, because of JavaScript object literals, the format is relatively easy
to understand, even for someone with little or no programming experience. Finally, as a game gets
bigger, so will the team that develops the game. By separating out level design as well as things
introduced earlier (such as sprite sheets), you allow non-programmers who excel at tasks such as
game design and graphics design to help you more effectively create awesome games.
You can deal with the different levels in Penguin Pairs in a similar fashion. In this chapter, you see
how to build such a level-loading scheme into your games. Another thing you look at is storing and
recalling the state of the game over different sessions. Games such as Painter and Jewel Jam don't
retain any information from previous times when the player played the game, which in those games
doesn't really matter. However, in the case of Penguin Pairs it does matter, because you don't want
the player to have to start all over every time the game is launched. If the player finishes a level,
the browser should remember that the next time the player launches the game, so the player can
continue where they left off.
Structure of a Level
Let's first look at what kind of things can be in a level in the Penguin Pairs game. First, there is some
kind of background image. Let's assume that this background is fixed when you load the level, so
there is no need to store any information about it in the text file.
In the level are a number of different animals such as penguins, seals, and sharks. There are also
icebergs, background blocks that penguins can move on, and a few more things. You want to store
all this information in a structured variable. One possibility would be to store every object's position
and type, but that would make the variable complicated. Another possibility is to divide the level into
small blocks, also called tiles . Every block has a certain type (this could be a penguin, a playing field
tile, a transparent tile, a penguin, and so on). A tile can be represented by a single character, and you
can store the structure of the level in a variable just as you did with the Tic Tac Toe example:
var myLevel = {
tiles : ["#.......#",
"#...r...#",
"#.......#",
"#. .#",
"#. .#",
"#. .#",
"#.......#",
"#...r...#",
"#.......#"]
};