Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak
Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

Table of Contents (18 chapters)
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Building a Physics Car Game with Box2D and Canvas
Index

Time for action – saving all essential game data in the local storage


We will continue work with our CSS3 card matching game:

  1. Open the matchgame.js JavaScript file.

  2. Add the following code at the top of the JavaScript file after declaring the matchingGame variable. This code creates an object named savingObject to save the array of the deck, the removed cards and the current elapsed time:

    matchingGame.savingObject = {};
    
    matchingGame.savingObject.deck = [];
    
    // array to store which card is removed by their index.
    matchingGame.savingObject.removedCards = [];
    
    // store the counting elapsed time.
    matchingGame.savingObject.currentElapsedTime = 0;
  3. In the jQuery ready function, add the following highlighted code. It clones the order of the deck to the savingObject. In addition, it assigns an index to each card in the DOM data attribute:

    $(document).ready(function(){
       // existing code goes here.
    
       // shuffling the deck
       matchingGame.deck.sort(shuffle);
    
       // copying the deck into saving object...