Timing gametime

[nass-ctid]

Hi guys.

I am posting on this forum because I am working on a uni project which consist in creating an HTML5/JS game. I've already created quite a little game using Phaser which looks like the image i've uploaded in this post.

So every time the player collect all of the honey jars, the game restarts automatically. No menus yet, something simple and effective. I would like to add a gametime timing functionality that would time how long it takes the player to kill all of the honey jars. Once the game restarts, the timer would have to be saved and stored in a JS global variable that I could use to display the best scores on my webpage and then starts again from 0. I've already tried some old methods that I found on this forum but nothing worked the way I wanted.

Could you guys help me? 

Cheers.

 

[mattstyles]

You've got two points here, resetting a timer and using that time to track a leaderboard.

To reset a timer, your absolute simplest method is to have a global `start` variable (this could be game.start or whatever), then, when you initialise your game, or when the user clicks to start the timer, you set this variable to the current time, when they finish and your game hits whatever kind of exit/finish state you have then you grab the time again and subtract the start time to get your running time.

var start = null

function onStart() {
  start = performance.now()
}

function onEnd() {
  console.log( performance.now() - start, 'ms' )
}

// Simulate game
onStart()
setTimeout( onEnd, 2000 )

In a perfect world this would log '2000 ms', but it won't, although it will be very close.

So you have your game running time, the 2nd part, sending it to a leaderboard, involves more steps.

You'll have to clarify exactly what you need:

* Do you need a local leaderboard? i.e. I play three games, I can then see 3 of my scores on a leaderboard

* Do you need a global leaderboard? i.e. I play three games, I can see my 3 scores and scores from other people

The top option is the easiest.

Option 1 - Local

To do a local leaderboard you just need some sort of persistence, the browser gives you cookies, local storage, session storage or a db implementation (depending on the browser). By far the easiest is local storage, which is simply a crude key value text store, accessed via setters and getters.

Try this:

localStorage.myAwesomeGameTime = 2000

console.log( localStorage.myAwesomeGameTime )

Now open up your browser console and go to the resources tab, open up local storage and you'll see your `myAwesomeGameTime` variable stuffed in there. Hit refresh and the value will still be there in storage, you can even close the browser and restart, hit the url, and it'll still be there. I think it'll pretty much be there until the end of time, although browser implementations do differ, Chrome doesn't generally give a monkeys about your HD, the others might be a little more sensitive.

If all you need is a list of times then the easiest way is to keep an array in there, bare in mind that localStorage only handles text so you'll need to manipulate your data a little.

Extending from our earlier example:

function onEnd() {
  var time = performance.now() - start
  var leaderboard = JSON.parse( localStorage.leaderboard )
  leaderboard.push( time )
  localStorage.leaderboard = JSON.stringify( leaderboard )
}

Note that you can pretty this up by using Array.concat and restructuring a bit, there's technically no reason to parse and stringify at all, you could just use a comma separated string and simplify things.

So, to display the list you'd do something pretty simple as well:

function display() {
  var pre = document.createElement( 'pre' )
  pre.innerHTML = JSON.parse( localStorage.leaderboard, null, '  ' )
  document.body.appendChild( pre )
}

You'll probably have a more creative display for the leaderboard.

You may also want to use an existing library to get around cross browser issues, although if you are only targeting modern browsers then their API's now match.

Option 2 - Global

Global would work pretty much the same, but you'd just ping off the new time to a server somewhere and request whatever times you needed from that server when you wanted to displays the times somewhere.

Obviously this option is trickier as you'll have to set up a server that can handle two requests (one to post a new time, one to get all times, or get top 10 times or whatever), you'll also have to handle some sort way of associated times with users (or user names) and you might then want to handle cheaters who just post bogus times.