Storing data using HTML5 local storage

Remember the CSS3 card matching game we made in Chapter 3, Building a Card-matching Game in CSS3? Imagine now that we have published our game and players are trying their best to perform well in the game.

We want to show the players whether they played better or worse than the last time. We will save the latest score and inform players whether they are better or not this time, by comparing the scores.

The reasons we might want to do this are because it gives the player a sense of pride when they perform better, and they may become addicted to our game to try to get higher scores, which is good for us.

Creating a game over dialog

Before actually saving anything in the local storage, we need a game over screen. We made a few games in previous chapters. We made a Ping Pong game, the card matching game, the Untangle puzzle game, and a music game. In these games, we did not create any game over screen. Imagine now that we are playing the CSS3 card matching game...