Game States - Building JavaScript Games for Phones, Tablets, and Desktop - page 224

Object.defineProperty(SpriteGameObject.prototype, "screenCenterY",
{
get: function () {
return (Game.size.y - this.height) / 2 + this.origin.y;
}
});
Now let's extend JewelJamGameWorld to display the “game over” overlay when needed. First you add
a method that checks whether the jewel cart is outside the screen:
JewelJamGameWorld.prototype.gameOver = function () {
var jewelCart = this.root.find(ID.jewel_cart);
return jewelCart.position.x > Game.size.x;
};
You can then use this method in the handleInput method so the player can press the left mouse
button or touch the screen to restart the game:
if (this.gameOver()) {
if (Mouse.left.pressed || Touch.isPressing)
this.reset();
return;
}
You override the reset method because you need to do a little extra work when the game restarts.
Notably, you have to set the visibility of some of the overlays to false so they aren't shown on the
screen when the game restarts. Apart from that, you simply call the reset method from the base
class so that all game objects in the game world are reset:
JewelJamGameWorld.prototype.reset = function () {
GameObjectList.prototype.reset.call(this);
var gameOver = this.root.find(ID.game_over);
gameOver.visible = false;
var titleScreen = this.root.find(ID.title);
titleScreen.visible = false;
var helpFrame = this.root.find(ID.help_frame);
helpFrame.visible = false;
};
Now there is only one thing left to do. If the game is over, you have to set the visibility of the
“game over” overlay to true . You do this in the update method of JewelJamGameWorld :
var gameOver = this.root.find(ID.game_over);
if (this.gameOver()) {
gameOver.visible = true;
}
Figure 16-3 shows a screenshot of the “game over” state.