Gameplay Programming - Building JavaScript Games for Phones, Tablets, and Desktop - page 210

As a result, the higher the variation index, the further to the right the rectangle is moved. Finally,
a call to the Canvas2D.drawImage method draws the jewel on the screen. Here is the complete
draw method:
Jewel.prototype.draw = function () {
if (!this.visible)
return;
var imagePart = new Rectangle(this.variation * this.height, 0,
this.height, this.height);
Canvas2D.drawImage(this.sprite, this.worldPosition, 0, 1, this.origin,
imagePart);
};
Maintaining the Current Score
The next step in making this game more interesting is to add a few game objects that relate to
the way the game is played and how rewards are handed to the player. In this game, you express
the reward given to the player as a number of points: the score . Every time the player finds a valid
combination of jewels, the player gains 10 points. This current score should be stored in a variable
or an object. Also, the score should be written on the screen, so the player knows how many points
they've obtained.
Now you see another advantage of not specifically assuming that every game object is represented
by a sprite. The score game object uses a font to display itself on the screen. To make this even
more generic, you first introduce a class called Label , which simply writes some text on the screen
at a certain position. This class is very similar to the SpriteGameObject class, except that you draw
text on the screen instead of a sprite. In order to do that, you need to store the text to be written and
the font that is used. You also store other text properties, such as the alignment of the text and the
size of the font. Here is the constructor of Label :
function Label(fontname, fontsize, layer, id) {
GameObject.call(this, layer, id);
this.color = Color.black;
this.origin = Vector2.zero;
this._fontname = typeof fontname !== 'undefined' ?
fontname : "Courier New";
this._fontsize = typeof fontsize !== 'undefined' ? fontsize : "20px";
this._contents = "";
this._align = "left";
this._size = Vector2.zero;
}
The last member variable you assign a value to in the constructor is _size . Knowing the size (height
and width in pixels) of the text can be very useful for drawing the text at the right spot. Because you
can only calculate the size of the text when you know what the text is, you initially set this value to
Vector2.zero .