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

Finally, you add a GlitterField instance to the playing field, as follows:
playingField.add(new GlitterField(2, columns * grid.cellWidth,
rows * grid.cellHeight, ID.layer_overlays_1));
Note that you place the glitter field in the overlay layer, so it's drawn on top of the jewel grid.
Let's also add a few glitters to the jewel cart. This example does that a little differently, to show you
the various possibilities for attaching game objects to other game objects. In the case of the jewel
cart, you introduce to the JewelCart class an additional member variable called glitters . This
variable refers to the GlitterField instance associated with the jewel cart:
this.glitters = new GlitterField(2, 435, 75);
You assign the glitter field an appropriate density, width, and height. Because you want the glitter field
to be drawn depending on the position of the cart, you make the cart the parent of the glitter field:
this.glitters.parent = this;
Finally, you give the glitter field a local position with respect to the cart so the glitters are drawn at
the right spot (around the top of the cart where the shiny jewels are):
this.glitters.position = new Vector2(275, 475);
The only thing left to do is make sure the glitters are actually drawn. For this, you need to extend
the draw method and explicitly call the draw method of the glitter field after the cart has been drawn.
Here is the complete method:
JewelCart.prototype.draw = function () {
SpriteGameObject.prototype.draw.call(this);
this.glitters.draw();
};
For the complete JewelCart class, see the JewelJamFinal example. Play around with the parameter
settings of the glitter fields. You can see the effect of changing the density, scale, and scale-step
variables. Figure 17-2 goes a little overboard!