Creating the Game Over Screen

So far we are tracking how many times the player dies, but not the number of lives the player has. We also don’t have a way to handle what happens when he runs out of those lives. Before we create our Game Over screen, let’s add a new property to the MyGame class in the main.js file:

lives: 3,

Now we are ready to show a Game Over screen. This is going to be similar to how we set up our start screen. Let’s create a new inner class in our main.js file right below our StartScreen, called GameOverScreen:

GameOverScreen = ig.Game.extend({ instructText: new ig.Font( 'media/04b03.font.png' ), background: new ig.Image('media/screen-bg.png'), gameOver: new ig.Image('media/game-over.png'), stats: {}, init: function() { ig.input.bind( ig.KEY.SPACE, 'start'); this.stats = ig.finalStats; }, update: function() { if(ig.input.pressed('start')){ ig.system.setGame(StartScreen) } this.parent(); }, draw: function() { this.parent(); this.background.draw(0,0); var x = ig.system.width/2; var y = ig.system.height/2 - 20; this.gameOver.draw(x - (this.gameOver.width * .5), y - 30); var score = (this.stats.kills * 100) - (this.stats.deaths * 50); this.instructText.draw('Total Kills: '+this.stats.kills, x, y+30, ig.Font.ALIGN.CENTER); this.instructText.draw('Total Deaths: '+this.stats.deaths, x, y+40, ig.Font.ALIGN.CENTER); this.instructText.draw('Score: '+score, x, y+50, ig.Font.ALIGN.CENTER); this.instructText.draw('Press Spacebar To Continue.', x, ig.system.height - 10, ig.Font.ALIGN.CENTER); ...

Get Building HTML5 Games with ImpactJS now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.