O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Player Stats Screen

Next up, we are going to look at how we can keep track of player stats such as the time it took to complete a level, total number of kills, and how many times the player died. Instead of making this screen a separate game class, we are going to build it into our MyGame class.

We are going to need to add impact.timer to the requires block of our MyGame class. Add the following properties to the MyGame class:

statText: new ig.Font( 'media/04b03.font.png' ),
showStats: false,
statMatte: new ig.Image('media/stat-matte.png'),
levelTimer: new ig.Timer(),
levelExit: null,
stats: {time: 0, kills: 0, deaths: 0},

The following properties will allow us to track the visibility of the stats display, an image we can use to mask the screen, a font, a timer, and a stats object. Next, we are going to need to override the loadLevel() method so we can start a timer to track how long it takes the player to complete the level:

loadLevel: function( data ) {
    this.parent(data);
    this.levelTimer.reset();
},

This basically resets the timer when the main game class has loaded a level. Now in order to display our screen, we have to pause the update loop. The easiest way to do this will be to wrap the call to this.parent() inside update() with a conditional. Here is what the new this.parent() code should look like inside of update():

// Update all entities and BackgroundMaps
if(!this.showStats){
    this.parent();
}else{
    if(ig.input.state('continue')){
        this.showStats = false;
        this.levelExit.nextLevel(); ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required