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

Table 24-1. Overview of the Different Kinds of Tiles in the Tick Tick Game

Character Tile Description

.

Background tile

# Wall tile

^

Wall tile (hot)

* Wall tile (ice)

- Platform tile

+

Platform tile (hot)

@ Platform tile (ice)

X

End tile

W Water drop

1 Start tile (initial player position)

R

Rocket enemy (moving to the left)

r Rocket enemy (moving to the right)

S

Sparky enemy

T Turtle enemy

A Flame enemy (random speed and direction change)

B

Flame enemy (player following)

C Flame enemy (patrolling)

Water Drops
The goal of each level is to collect all the water drops. Each water drop is represented by an instance
of the WaterDrop class. This class is a SpriteGameObject subclass, but you want to add a little behavior
to it: the water drop should bounce up and down. You can do this in the update method. First you
compute a bounce offset that you can add to the current position of the water drop. This bounce offset
is stored in the member variable _bounce , which is initially set to 0 in the constructor:

this._bounce = 0;

To calculate the bounce offset in each game-loop iteration, you use a sine function. And depending
on the x -position of the water drop, you change the phase of the sine so that not all drops move up
or down at the same time:

var t = powerupjs.Game.totalTime * 3 + this.position.x;
this._bounce = Math.sin(t) * 5;

You add the bounce value to the y -position of the water drop:

this.position.y += this._bounce;