Sprite Sheets - Building JavaScript Games for Phones, Tablets, and Desktop - page 245

Note You have seen how to analyze string contents by using, among others, the split method.
There are many more ways to manipulate string data in JavaScript. For a more complete overview, visit
www.w3schools.com/js/js_strings.asp , which is an excellent tutorial on JavaScript strings.
Managing the Sprite Sheet
You have already seen in the Jewel Jam game how to deal with a strip of sprites. You had to change
the draw method to draw only part of the sprite. Here you need to do some extra administrative
work to make sure the sprite sheet behaves the way it should. The first thing to do is add to the
SpriteSheet class a width property and a height property that take into account the column and row
numbers of the sprite sheet:
Object.defineProperty(SpriteSheet.prototype, "width",
{
get: function () {
return this._image.width / this._sheetColumns;
}
});
Object.defineProperty(SpriteSheet.prototype, "height",
{
get: function () {
return this._image.height / this._sheetRows;
}
});
Also, you add a property that computes the number of elements in the sheet, which is defined as the
number of rows multiplied by the number of columns:
Object.defineProperty(SpriteSheet.prototype, "nrSheetElements",
{
get: function () {
return this._sheetRows * this._sheetColumns;
}
});
You can also add a few more useful properties to SpriteSheet . Have a look at the PenguinPairs1
example belonging to the chapter to see the full SpriteSheet class.
The next step is being able to draw one of the elements in the sprite sheet. This is done in the draw
method of the SpriteSheet class. This method expects a few parameters, notably the position at
which the element should be drawn, its origin, and which element should be drawn. The latter is
expressed by an index in the sprite sheet, and it's passed as the sheetIndex parameter. As a first