Saving high score

On Jul 19, 2017 1:02 pm, by phaserjs

When playing a game, you will quickly realize there is no point in making a great score if you can’t save it and try to beat it later. We are going to cover how to save your best score, and keep it saved even if you close the browser window or turn off your computer or device.

All modern browsers natively support local storage, a way used by web pages to locally store data in a key/value notation. The information you save will continue to be stored even when you shut down your device and can be read every time you launch your game. This is exactly what we need.

Let’s create two new variables:

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

var tileSize = 80;

var numRows = 4;

var numCols = 5;

var tileSpacing = 10;

var localStorageName = "crackalien";

var highScore;

var tilesArray = [];

var selectedArray = [];

var playSound;

var score;

var timeLeft;

var tilesLeft;

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

localStorageName variable stores the name of the local storage variable, so each time you will change crackalien with something else, you will reset your best score. highScore will contain the actual high score number.

When we launch the game, before entering the title screen we will check the local storage to see if we already saved a high score, so we are going to add a line before starting TitleScreen state. This line will introduce a lot of new concepts:

game.state.add("TitleScreen", titleScreen);
game.state.add("PlayGame", playGame);
game.state.add("GameOver", gameOver);
highScore = localStorage.getItem(localStorageName) == null ? 0 :
            localStorage.getItem(localStorageName);
game.state.start("TitleScreen");

game.state.add("TitleScreen", titleScreen);

game.state.add("PlayGame", playGame);

game.state.add("GameOver", gameOver);

highScore = localStorage.getItem(localStorageName) == null ? 0 :

localStorage.getItem(localStorageName);

game.state.start("TitleScreen");

Does it look strange?
It’s a conditional operator, also called ternary operator because it requires three operands.

A conditional operator, written as condition ? expr1 : expr2 will return the value of expr1 if condition is true, or the value of expr2 if condition is false. Think about it as a short if statement like if (condition) then expr1 else expr2.

Writing the conditional operator as an if statement, it will look like:

if(localStorage.getItem(localStorageName) == null) {
    highScore = 0;
} else {
    highScore = localStorage.getItem(localStorageName);
}

if(localStorage.getItem(localStorageName) == null) {

highScore = 0;

} else {

highScore = localStorage.getItem(localStorageName);

}

getItem method of localStorage retrieves localStorageName data. If it’s null, it means we never saved a high score.

localStorage.getItem(keyName) returns keyName ‘s value.

Probably it’s the first time we launch the game in this browser, or we never played until game over screen – where we will save the score – or we just changed localStorageName name.

In this case, highScore is set to zero. If there is a value in local storage data, this means we previously saved a high score so we set highScore to this value. And this is how we retrieve previously saved high score, if any. To save it, we’ll need to add a couple of lines to create method in GameOver
state:

create: function() {
    highScore = Math.max(score, highScore);
    localStorage.setItem(localStorageName, highScore);
    
    var style = {
        font: "32px Monospace",
        fill: "#00ff00",
        align: "center"
    }
    
    var text = game.add.text(
        game.width / 2, game.height / 2, "Game Over\n\nYour score: " + score + "\nBest score: " + highScore + "\n\nTap to restart", style
    );
    
    text.anchor.set(0.5);
    game.input.onDown.add(this.restartGame, this);
}

create: function() {

highScore = Math.max(score, highScore);

localStorage.setItem(localStorageName, highScore);

var style = {

font: "32px Monospace",

fill: "#00ff00",

align: "center"

}

var text = game.add.text(

game.width / 2, game.height / 2, "Game Over\n\nYour score: " + score + "\nBest score: " + highScore + "\n\nTap to restart", style

);

text.anchor.set(0.5);

game.input.onDown.add(this.restartGame, this);

}

Now launch the game and play a couple of times, then close the browser window or even restart your computer / device.

Your high score will always remain saved:

Let’s see how that was possible. The first thing to do is to see if the current score is higher than highScore value and in that case update highScore variable setting it to score. Rather than using an if statement, to see something new we’ll always update highScore value setting it to the highest number between score and highScore.

Math.max(v1, v2, v3, … , vn) method returns the highest number among it’s arguments.

Once highScore has been updated, it’s time to save it to the local storage.

localStorage.setItem(keyName, keyValue) method adds keyName to the storage, or updates it to keyValue if it already exists.

And finally we can output the score as well as the high score. Now your game will remember your best score. As a final advice, I don’t recommend using simple names like “bestScore” or “currentLevel” for your local storage variables as other applications could use the same names, and you will overwrite other settings with your data, or get your data overwritten by other applications data.

Use long names, with your game name as prefix, such as CrakAlienCodeScore, so when you’ll make another game called, let’s say, Endless Jumper, you will save your score in a variable called EndlessJumperScore, and you won’t have problems.