Pairing the Penguins - Building JavaScript Games for Phones, Tablets, and Desktop - page 283

Note There is no particular reason I chose to use two sprites to implement the hover status. You could also
place the eight arrow images on a single sprite sheet and use that instead of the two sprite sheets used here.
Because an Arrow instance more or less reacts like a button, it inherits from the Button class.
In the constructor, you first create the superclass part of the instance by calling the constructor of
the superclass. This loads the first arrow image. Then you define a second sprite, arrowHover , that
contains the arrow image when you hover over it. By default, this sprite isn't visible, so you set its
visibility status to false . You also set the parent of that sprite to be the Arrow instance, so that it's
drawn in the right position. Here is the complete constructor:
function Arrow(sheetIndex, layer, id) {
Button.call(this, sprites.arrow, layer, id);
this.sheetIndex = sheetIndex;
this.arrowHover = new SpriteGameObject(sprites.arrow_hover);
this.arrowHover.sheetIndex = sheetIndex;
this.arrowHover.visible = false;
this.arrowHover.parent = this;
}
The sheet index that is passed as a parameter to the Arrow constructor is passed along to the actual
sprites so the correct arrow direction is selected.
In the handleInput method, you check whether the hover sprite should be visible by calculating
whether the mouse position is inside the bounding box of the arrow sprite. You only need to do this
if the game isn't running on a touch device, so you incorporate that condition when calculating the
visibility status:
Arrow.prototype.handleInput = function (delta) {
Button.prototype.handleInput.call(this, delta);
this.arrowHover.visible = !Touch.isTouchDevice &&
this.boundingBox.contains(Mouse.position);
};
Finally, you override the draw method so you can add a line to draw the hover sprite as well:
Arrow.prototype.draw = function () {
Button.prototype.draw.call(this);
this.arrowHover.draw();
};