Finishing the Jewel Jam Game - Building JavaScript Games for Phones, Tablets, and Desktop - page 230

Now you can use the VisibilityTimer class to control the visibility of the double and triple
combination overlays in the Jewel Jam game. When you create overlay objects, you also create
VisibilityTimer instances with these overlays as their target:
var doubleOverlay = new SpriteGameObject(sprites.double, ID.layer_overlays);
doubleOverlay.position = new Vector2(800, 400);
var doubleTimer = new VisibilityTimer(doubleOverlay, ID.layer_overlays, ID.double_timer);
this.add(doubleOverlay);
this.add(doubleTimer);
var tripleOverlay = new SpriteGameObject(sprites.triple, ID.layer_overlays);
tripleOverlay.position = new Vector2(800, 400);
var tripleTimer = new VisibilityTimer(tripleOverlay, ID.layer_overlays, ID.triple_timer);
this.add(tripleOverlay);
this.add(tripleTimer);
When two or three combinations of jewels occur, you start the visibility timer of that particular
overlay. For example, this is what the code looks like for the double combination (see the update
method of the JewelGrid class):
if (nrCombis === 2) {
score.score += 50;
var doubleTimer = this.root.find(ID.double_timer);
doubleTimer.startVisible();
}
You can see the timer in action by running the JewelJamFinal program available with this chapter.
A Field of Glitters
In this section, you add some eye candy to the game. Currently, the jewels are sprites displayed
on the screen. Let's add a nice visual effect to them: glitters. You can do this in a generic way by
designating a rectangle on the screen in which the glitters are drawn at random positions. You also
want to be able to indicate how dense this rectangle of glitters is. Then you can create rectangles of
different sizes and attach them to game objects. Figure 17-1 shows the areas on the screen where
you would like to add glitters. Later in the chapter, Figure 17-2 shows the final output that will be
shown to the player.