Chapter 7. Saving the Game's Progress
Local storage is a new specification from HTML5. It allows a website to store information in the browser locally and access the stored data later. This is a useful feature in game development because we can use it as a memory slot to save any game data locally in a web browser.
We are going to add the feature of storing game data in the CSS3 card matching game we built in Chapter 3, Building a Card-matching Game in CSS3. Besides storing and loading the game data, we will also notify the player when they break a record with a nice 3D ribbon using pure CSS3 styling.
In this chapter, we will cover the following topics:
- Storing data by using HTML5 local storage
- Saving the object in the local storage
- Notifying players when they break a new record with a nice ribbon effect
- Saving the entire game's progress
You may try the final game at: http://makzan.net/html5-games/card-matching/.
The following screenshot shows the final result we will create...
