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

The += operator adds the bounce value to the y -position (see Chapter 10 for more about these
types of operators). However, simply adding the bounce value to the y -position isn't correct,
because this is a bounce offset —in other words, an offset with regard to the original y -position.
To get the original y -position, you subtract the bounce offset from the y -position in the first
instruction of the update method:
this.position.y -= this._bounce;
This works because at this point, the _bounce variable still contains the bounce offset from the
previous game-loop iteration. So, subtracting from the y -position gives you the original y-position.
In the next chapter, you add more game objects, such as the player and a variety of enemies.
But let's first look at how to define the tiles in a platform game such as Tick Tick.
The Tile Class
The Tile class is very similar to the one used in Penguin Pairs, but it has a few differences. First,
you define the different tile types in a variable:
var TileType = {
background: 0,
normal: 1,
platform: 2
};
In the Tile class, you then declare a member variable type to store the type of tile that an instance
represents. In addition to these basic tile types, you also have ice tiles and hot tiles, which are
special versions of normal or platform tiles. In the level data variable, an ice tile is represented by the
* character (or the @ character if it's a platform tile), and a hot tile is represented by the ^ character (or the
+ character for the platform version). You add two boolean member variables to the Tile class with their
associated properties to represent these different kinds of tiles. Here is the complete Tile constructor:
function Tile(sprite, tileTp, layer, id) {
sprite = typeof sprite !== 'undefined' ? sprite : sprites.wall;
powerupjs.SpriteGameObject.call(this, sprite, layer, id);
this.hot = false;
this.ice = false;
this.type = typeof tileTp !== 'undefined' ? tileTp : TileType.background;
}
As you can see, you check whether the sprite and tileTp variables are defined. If they aren't, you
assign them a default value. This allows you to create Tile instances without having to pass along
the parameters all the time. For example, the following instruction creates a simple background
(transparent) tile:
var myTile = new Tile();
Now, let's look at the Level class and how the Tile instances are created.