O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – saving the time alongside the score

Carry out the following steps:

  1. First, open the index.html file from our CSS3 card matching game.
  2. Replace the HTML markup with the last score, with the following HTML (it shows both scores and the date time in the game over popup):
    <p>
      <small>Last Score: <span class='last-score'>0</span><br>
        Saved on: <span class='saved-time'></span>
      </small>
    </p>
  3. The HTML markup is now ready. We will move on to the game logic. Open the html5games.matchgame.js file in a text editor.
  4. We will modify the gameover function. Add the following highlighted code to the gameover function. It gets the current date and time when the game ends and packs a formatted date and time with elapsed time together in the local storage: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required