Many arcade games implement a Leaderboard or High Score table so that players can compete to try to get the highest score possible. Adding a local leaderboard using HTML Local Storage means that your web browser will store high scores on your computer, even if you close the application and come back another day. Unfortunately, HTML Local Storage should not be considered a permanent solution - as it doesn’t get backed up if you re-install your web-browser - but for storing ‘Today’s Highest Scores’ on your PC, it works great.

Task Definition

For this task you want to keep track of the top 5 scores that the local user has attained whenever they have played your game. Note. This task is about saving the scores in the user’s web-browser and not online - so only the current user will be able to see these scores.

You will also want to add the highscore table to your ‘Game Over State’ so that the user can see how they have performed against the competition! This will involve creating a bunch of text labels on the screen to show the names and scores of the top 5 players.

This is a perfect time to make an object (or class) to encapsulate the Local Leaderboard so that it’s all in one place. You could even add it to it’s own JavaScript file if you like!

Hints

The following code snippets give you an example of how to save and load data using HTML Local Storage. Note that data is saved “per domain” based on the address you use to access the page - so if you upload your game to the web, that will store data in a different local database to the one you see when running from Brackets.

localStorage.setItem(key, value);

Using ‘setItem’ on the local storage will store a value in the local database. You can use any string as a name/key and then set any value you could have in a variable in JavaScript.

localStorage.getItem(key);

Use ‘getItem’ to retrieve a value that you previously stored in localStorage.

localStorage.removeItem(key);

If you no longer need to store a certain item in the localStorage, you can use this method to remove it.

Example

// Session 1
var fruits = ["Apple", "Kiwi", "Orange"];
localStorage.setItem('fruits', fruits);

// Session 2 - The Next Day
var fruits = localStorage.getItem('fruits');
console.log(fruits);		// Prints 'Apple,Kiwi,Orange'

Sample Solution

Click on the button below to see an example solution for the sample project.

Create a new file: localscoreboard.js

localScoreBoard = {
	data = [],

	addScore: function(name, score) {
		// Add the new score to end of 'data'
		this.data.push([name, score]);

		// Sort data by all of the scores
		this.data.sort(function(a, b) {
			return a[1] > b[1];
		});

		// Take just the top 5 elements
		if (data.length > 5) {
			this.data = this.data.splice(0, 5);
		}
	},

	getScores: function() {
		return this.data;
	},

	saveScores: function() {
		localStorage.setItem('scoreboard', this.data);
	},

	loadScores: function() {
		localStorage.getItem('scoreboard');
	},
}

Now, in your main game you can access your new score board using the following code;

function onGameOver() {
	localScoreBoard.addScore(["John", 300]);
	localScoreBoard.saveScores();
}

And on the GameOver state you can access the scores using the following;

gameOverState.create = function() {
	localScoreBoard.loadScores();
	var scores = localScoreBoard.getScores();

	var textStyle = {font: "12px Arial", fill: "#ccddff"}

	for (i in scores) {
		var name = scores[i][0];
		var score = scores[i][1];

		game.add.text(game.width * 0.25, game.height - 300 + (i * 50), name, textStyle);
		game.add.text(game.width * 0.75, game.height - 300 + (i * 50), score, textStyle);
	}
}