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

The Level Class
This section shows how the Level class is designed in Tick Tick. It's done in a way very similar to
Penguin Pairs. In the constructor of the Level class, you do a couple of things:
Create the background sprite game object.



Add a Quit button.



Create the tile-based game world from the level data.


The first two are straightforward. Have a look at the Level class in the example code to see how they
work. Creating the tile-based game world is done in a separate method called loadTiles . Depending
on the level index, a different game world is created. The first step is creating a GameObjectGrid
instance with the desired height and width, taken from the levelData variable:

var tiles = new powerupjs.GameObjectGrid(levelData.tiles.length,
levelData.tiles[0].length, 1, ID.tiles);
this.add(tiles);

You set the width and height of each cell in the grid so the game-object grid knows where to draw
the tiles on the screen:

tiles.cellWidth = 72;
tiles.cellHeight = 55;

Then you create the Tile objects and add them to the GameObjectGrid object:

for (var y = 0, ly = tiles.rows; y < ly; ++y)
for (var x = 0, lx = tiles.columns; x < lx; ++x) {
var t = this.loadTile(levelData.tiles[y][x], x, y);
tiles.add(t, x, y);
}

The nested for loop examines all the characters you read from the level data variable. You use a
method called loadTile , which creates a Tile object for you, given a character and the x - and
y -positions of the tile in the grid.
In the loadTile method, you want to load a different tile according to the character passed as a
parameter. For each type of tile, you add a method to the Level class that creates that particular kind
of tile. For example, LoadWaterTile loads a background tile with a water drop on top of it:

Level.prototype.loadWaterTile = function (x, y) {
var tiles = this.find(ID.tiles);
var w = new WaterDrop(ID.layer_objects);
w.origin = w.center.copy();
w.position = new powerupjs.Vector2((x + 0.5) * tiles.cellWidth,
(y + 0.5) * tiles.cellHeight - 10);
this._waterdrops.add(w);
return new Tile();
};