Seeking the optimal method to incorporate a timer into my memory game. This game comprises numerous squares, and when the user successfully completes it, a modal appears congratulating them on their win and providing an option to restart the game.
The objective is to display the time taken by the user to play the game, starting from 0 seconds upon opening the page until x seconds elapse. Upon completion of the game, the score is displayed in the modal for the user's reference. However, if the user fails to complete the quiz within x seconds, a function triggers the modal to inform them they have run out of time and offers a chance to restart.
I am utilizing a modified version of this game on CodePen
HTML:
<div class="modal-overlay">
<div class="modal">
<h2 class="winner">Congratulations!</h2>
<button class="restart">Play Again?</button>
<p class="message">Created on <a href="http://codepen.io">CodePen</a> by <a href="http://codepen.io/natewiley">Nate Wiley</a></p>
<p class="share-text">Share it?</p>
<ul class="social">
<li><a target="_blank" class="twitter" href="http://twitter.com/share?url=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-twitter-bird"></span></a></li>
<li><a target="_blank" class="facebook" href="http://www.facebook.com/sharer.php?u=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-facebook"></span></a></li>
<li><a target="_blank" class="google" href="https://plus.google.com/share?url=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-googleplus-rect"></span></a></li>
</ul>
</div>
</div>All logos are properties of respective owners, no intention of Copyright infringement.
CSS section:
@import url(http://weloveiconfonts.com/api/?family=brandico);
/* brandico */
[class*="brandico-"]:before { font-family: 'brandico', sans-serif; }
* { box-sizing: border-box; }
... (CSS code continues)
...Javascript:
(function(){
var Memory = {
init: function(cards){
this.$game = $(".game");
this.$modal = $(".modal");
... (Javascript code continues)
...