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

Creating the Level Instances
In the Level constructor, you have to create the different game objects belonging to that level. As a
first step, you retrieve the level data and store it in a variable called levelData :
function Level(levelIndex) {
GameObjectList.call(this);
var levelData = window.LEVELS[levelIndex];
this.levelIndex = levelIndex;
// to do: fill this level with game objects according to the level data
}
You also need to keep track of animals such as the penguins and seals. You do this in a separate
array so you can look them up quickly later. The same holds for the sharks that are present in some
of the levels:
this.animals = [];
this.sharks = [];
Now you can start creating game objects to fill the game world. First you add a background image to
the game world:
this.add(new SpriteGameObject(sprites.background_level, ID.layer_background));
Then you read the width and height of the level. You can determine those by retrieving the length of
the tiles array as well as the length of a single string in that array:
var width = levelData.tiles[0].length;
var height = levelData.tiles.length;
You then create a GameObjectList instance to contain the playing field, just as you did in the Jewel
Jam game. You position this playing field in such a way that it's nicely centered on the screen:
var playingField = new GameObjectList(ID.layer_objects);
playingField.position = new Vector2((Game.size.x - width * 73) / 2, 100);
this.add(playingField);
Now you need to retrieve the tile information from the levelData variable. You reuse the
GameObjectGrid class to represent a grid of tiles. To read all the tiles, you use a nested for
instruction. Have a look at the following lines of code:
var tileField = new GameObjectGrid(height, width, ID.layer_objects, ID.tiles);
tileField.cellHeight = 72;
tileField.cellWidth = 73;
for (var row = 0; row < height; row++) {
for (var col = 0; col < width; col++) {
// handle the tile 'levelData.tiles[row][col]' here
}
}