Time for action – saving the game score
First, we need to add a few markups in the
popup
section to display the last score. Add the following HTML inpopup-box
inindex.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>
Then, we open the
matchgame.js
to modify some game logic in thegameover
function.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...