Increasing difficulty by adding a timer

On Jul 13, 2017 6:43 pm, by phaserjs

What if you had a time limit to complete the game? Let’s increase the difficulty by giving you only a minute to solve the game. timeLeft variable will keep track of the remaining time we have.

var tileSize = 80;
var numRows = 4;
var numCols = 5;
var tileSpacing = 10;
var tilesArray = [];
var selectedArray = [];
var playSound;
var score;
var timeLeft;
var game = new Phaser.Game(500, 500);

var tileSize = 80;

var numRows = 4;

var numCols = 5;

var tileSpacing = 10;

var tilesArray = [];

var selectedArray = [];

var playSound;

var score;

var timeLeft;

var game = new Phaser.Game(500, 500);

Now we have to prevent the player from cheating. If you remove the focus from the page, the game will pause. This means timer won’t decrease, and this is cheating. We are going to prevent this by setting stage.disableVisibilityChange property to true. Let’s add it in the title screen.

create: function() {
    game.stage.disableVisibilityChange = true;
    var style = {
        font: "48px Monospace",
        fill: "#00ff00",
        align: "center"
    };
    
    var soundButton = game.add.button(
        game.width / 2 - 100 , game.height / 2 + 100, "soundicons", this.startGame, this
    );
    
    soundButton.anchor.set(0.5);
    soundButton = game.add.button(
        game.width / 2 + 100 , game.height / 2 + 100, "soundicons", this.startGame, this
    );
    
    soundButton.frame = 1;
    soundButton.anchor.set(0.5);
    var text = game.add.text(
        game.width / 2, game.height / 2 - 100, "Crack Alien Code", style
    );
    
    text.anchor.set(0.5);
}

create: function() {

game.stage.disableVisibilityChange = true;

var style = {

font: "48px Monospace",

fill: "#00ff00",

align: "center"

};

var soundButton = game.add.button(

game.width / 2 - 100 , game.height / 2 + 100, "soundicons", this.startGame, this

);

soundButton.anchor.set(0.5);

soundButton = game.add.button(

game.width / 2 + 100 , game.height / 2 + 100, "soundicons", this.startGame, this

);

soundButton.frame = 1;

soundButton.anchor.set(0.5);

var text = game.add.text(

game.width / 2, game.height / 2 - 100, "Crack Alien Code", style

);

text.anchor.set(0.5);

}

Now in the same way we added scoreText variable to have the score text displayed, we add a new variable to show the remaining time.

playGame.prototype = {
    scoreText: null,
    timeText: null,
    soundArray: [],
    ...
}

playGame.prototype = {

scoreText: null,

timeText: null,

soundArray: [],

...

}

And when we initialize the game, we set the time limit to 60, which means you’ll have to complete the game in a minute. There’s no need to explain you how to create the text which will show the remaining time:

create: function() {
    score = 0;
    timeLeft = 60;
    this.placeTiles();
    if(playSound) {
        this.soundArray[0] = game.add.audio("select", 1);
        this.soundArray[1] = game.add.audio("right", 1);
        this.soundArray[2] = game.add.audio("wrong", 1);
    }
    
    var style = {
        font: "32px Monospace",
        fill: "#00ff00",
        align: "center"
    }
    
    this.scoreText = game.add.text(5, 5, "Score: " + score, style);
    this.timeText = game.add.text(5, game.height - 5, "Time left: " + timeLeft, style);
    his.timeText.anchor.set(0, 1);
    game.time.events.loop(Phaser.Timer.SECOND, this.decreaseTime, this);
}

create: function() {

score = 0;

timeLeft = 60;

this.placeTiles();

if(playSound) {

this.soundArray[0] = game.add.audio("select", 1);

this.soundArray[1] = game.add.audio("right", 1);

this.soundArray[2] = game.add.audio("wrong", 1);

}

var style = {

font: "32px Monospace",

fill: "#00ff00",

align: "center"

}

this.scoreText = game.add.text(5, 5, "Score: " + score, style);

this.timeText = game.add.text(5, game.height - 5, "Time left: " + timeLeft, style);

his.timeText.anchor.set(0, 1);

game.time.events.loop(Phaser.Timer.SECOND, this.decreaseTime, this);

}

Anyway, there’s a couple of lines I want to show you in detail:

this.timeText.anchor.set(0, 1);

1	this.timeText.anchor.set(0, 1);

This time anchor.set(0, 1) means the anchor point is on the bottom left angle. The second line I want you to see is the one handling the timer.

game.time.events.loop(Phaser.Timer.SECOND, this.decreaseTime, this);

1	game.time.events.loop(Phaser.Timer.SECOND, this.decreaseTime, this);

This time we aren’t dealing with a timer which only runs once, but with a loop.

time.events.loop(delay, callback, callbackContext) adds a looped event that will repeat forever or until it’s stopped. It will call callback function in the callbackContext context.

Let’s have a look at the callback function, called decreaseTime:

decreaseTime: function() {
    timeLeft --;
    this.timeText.text = "Time left: " + timeLeft;
}

decreaseTime: function() {

timeLeft --;

this.timeText.text = "Time left: " + timeLeft;

}

It decreases the timer, then updates the text showing the time left. Run the game:

Having a timer is nice, but quite useless if once the time is over nothing happens.

Download Source

File: adding-a-timer.zip

Next Tutorial →

Showing Game Over screen

← Previous Tutorial

Showing the score

Increasing difficulty by adding a timer

Download Source

Next Tutorial →

← Previous Tutorial

Stay Connected