high score Create a High Score with Phaser?

[Rookie Boy]

Hi!

This is my first time creating a game via a tutorial which I've coded along with so I am a completely new at this but I am eager to learn.
I've this game "Bunny Defender" and want to create a simple High Score which I can store in some kind of localstorage with ex XML and
display the high score result out on the screen when the game is over. 

I don't know how to do this and where to start. Would be very thankful if someone could point me at the right direction and how to manage this?

// The complete game online
http://rewindlevel.net/

// All the game files on github
https://github.com/eiffelqiu/bunny-defender

 

/Rookie Boy

[mattstyles]

Every browser supports local storage, which is a key-value string based store with a super simple api.

window.localStorage.setItem( 'playerName', '2300' )

And that's it, you can even shorten it a little and you could insert a number instead of a string but note it'll get turned into a string when the browser actually stuffs it into storage. It'll be keyed against the current url and will be available the next time (and every other time) you hit that url, and its synchronous so you don't even have to worry about waiting for it to complete.

console.log( window.localStorage.getItem( 'playerName' )
// 2300

How you choose to store things is up to you but its just a key value pair, no nesting or levels or anything, super simple and simple is good. If you want to stuff JSON in there then go ahead its just text, ditto if you really want to use XML, if you want to stuff in an object then stringify it first, localStorage won't do this for you but it's probably worth using a wrapper library anyway, particularly if you want to support old browsers whereby the wrapper should gracefully degrade to use cookies.

You could use IndexedDB or even Web SQL but they're trickier to use, have a few cross-browser issues and are overkill for your requirements.

[drhayes]

mattstyles is 100% right.

One caveat: since localStorage is synchronous it'll stop your game to read it and write it. Since it's backed by a hard disk this pause can last dozens of milliseconds and make your game skip frames. There's no way around it. Just be careful where you do it (like not in the middle of a level).

[Rookie Boy]

Ok thanks mattstyles! I think I'll go for the JSON for storing my data. I'am going to start to do some research about JSON but do you have any tips, pointers before I start mattstyles?

[mattstyles]

Not really, read the docs at mdn (or elsewhere) and dive right in, best way to get going.

Remember to stringify your json on the way into local storage and parse it on the way out, then it'll be a bit easier to work with. A naive update to the leaderboard might look something like:

let playerName = 'dave'
let score = 2000

// Retrieve current leaderboard and parse into an object
let scores = JSON.parse( localStorage.scores )

// Append dave's score, note this will overwrite an existing entry
scores[ playerName ] = score

// Now stuff this update back into storage
localStorage.scores = JSON.stringify( scores )

Note that in this terse example some player names will nuke the object as not every character is valid as an object key, either sanitize the player name so its a valid object key or store in another format, for example you might want to store as key-value pairs in an array, this will make insertion slightly more complex but will help for filtering or sorting (such as by location or by type of player of whatever, by location probably isn't very useful for a local store!)

Doing it by stuffing in objects could be done something like this

let score = {
  name: 'dave',
  score: 200
}

let scores = JSON.parse( localStorage.scores )

// Just stuff it in, in practise we'd probably want to search for 
// entries with the same player name and remove them, or maybe we don't care
/// We could also sort at this point
scores = scores.push( score )

localStorage.scores = JSON.stringify( scores )

This data structure is a little more complicated but helps when you want to do anything with that data, as they are objects in an array so all array methods are at your disposal, sort will be of particular relevance but you might want to add extra stuff so you can filter your scores, for example, you might filter by difficulty level.

[Rookie Boy]

I'am a bit confused about the player-option in the game, because I haven't declared one in this game. The game starts when a user push the start-text, which then triggers a timer. When all of the game-object is destoyed, the end of the game only display a text which say how many seconds I survived. If I understand correctly I need to take the result of the timer and save it in a player variable and then store the players score in JSON. Is that what you mean in your example?

Sorry for my english and understanding, this is so new to me but very fun!  

[mattstyles]

I think the link is wrong in the first post but I found the url from your source code.

If you aren't registering a player name then it becomes even easier, if you are only registering one highest score then you don't even need json, just stuff the score straight into local storage.

let score = 500

let highscore = localStorage.highScore

// Cast the current high score into a number and compare with the current score
if ( highscore | 0 < score ) {
  // New score is higher so keep track of it
  localStorage.highScore = score

  // You probably want to do something to update the UI to show a new high score,
  // maybe fireworks, everyone like fireworks
  
  return
}

// If the current score is NOT a new high score then update the UI
// and let the player try again

If you're keeping track of a few scores then use a sorted array and put that into storage.

[eddieone]

If you want something already made, id.net offers high scores. See the JS scores documentation.