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 the game score


  1. First, we need to add a few markups in the popup section to display the last score. Add the following HTML in popup-box in index.html. The changed code is highlighted:

    <section id="popup" class="hide">
      <div id="popup-bg">
      </div>
      <div id="popup-box">
        <div id="popup-box-content">
          <h1>You Won!</h1>
          <p>Your Score:</p>
          <p><span class='score'>13</span></p>
          <p>
            <small>Last Score: <span class='last-score'>20</span>
            </small>
          </p>
        </div>
      </div>
    </section>
  2. Then, we open the matchgame.js to modify some game logic in the gameover function.

  3. Add the following highlighted code in the gameover function. It loads the saved score from the local storage and displays it as the score last time. Then, we save the current score in the local storage:

    function gameover() {
      // stop the...