a new timer loads each time a new card is clicked

Question

I'm very close to finishing a memory game project. I'm having two main issues with the timer function. The timer stars on page load instead of when a player clicks a card.

This is the timer code.

var sec = 0;
function startTime(val) { return val > 9 ? val : "0" + val; }
var timer = setInterval(function() {
    $("#seconds").html(startTime(++sec % 60));
    $("#minutes").html(startTime(parseInt(sec / 60, 10)));
}, 1000);

When I write it this way and put it in a function startTimer() to start after card click it creates a new timer after each card is a click.

function startTimer() {
    var timer = setInterval(function() {
        $("#seconds").html(startTime(++sec % 60));
        $("#minutes").html(startTime(parseInt(sec / 60, 10)));
    }, 1000);
}

$(card).on('click', function() {
    $(card).addClass('open show disabled');
    startTimer(); 
    if ($(card).hasClass('open show disabled'));
    openedCards.push(card);

Also, I'm looking for a way to reset this timer on a new page load. I've tried the following code:

function resetTime(val) {
    $("#seconds").html = 0; 
    $("#minutes").html = 0; 

    startTimer();

Any help with these problems will be greatly appreciated. This is a link to my code pen. https://codepen.io/tb0217/pen/wYzMBe

score 0 · Answer 1 · answered Oct 07 '18 at 03:56

You can check if the timer has been set or not by if condition

var timer; // declare it globally here

function startTimer() {
    timer = setInterval(function() {
        $("#seconds").html(startTime(++sec % 60));
        $("#minutes").html(startTime(parseInt(sec / 60, 10)));
    }, 1000);
}

$(card).on('click', function() {
    if(!timer) startTimer(); // checks if the timer is set or not
    // code
}

darklightcode · Answer 2 · 2018-10-07T14:55:33.000

I enjoyed your little game, i've made you this timer object for better use:

I added timer.start(); to your startGame() function and timer.stop() when the player won

const timer = {
  elapsedTime: 0,
  status: '',
  timeObj: '',
  formatTime: function(val) {
    return val > 9 ? val : "0" + val;
  },
  counter: function(sec) {

    $this = this;

    if (typeof sec !== 'number') sec = 0;

    this.elapsedTime = sec;

    if ($this.timeObj !== '') {
      clearTimeout($this.timeObj);
    }

    $this.timeObj = setTimeout(function() {

      clearTimeout($this.timeObj);

      if (['start', 'resumed'].indexOf($this.status) !== -1) {

        if ($this.status === 'resumed') {
          $this.status = 'start';
        }

        $("#seconds").html($this.formatTime(sec % 60));
        $("#minutes").html($this.formatTime(parseInt(sec / 60, 10)));

        return $this.counter(++sec);

      }

    }, 1000)



  },
  start: function(startFrom) {

    if (typeof startFrom !== 'number') {
      startFrom = 0;
    };
    $this = this;
    if (this.status !== 'resumed') {
      this.status = 'start';
    }

    this.counter(startFrom);

  },
  pause: function() {
    this.status = 'paused';
  },
  resume: function() {
    $this = this;
    this.status = 'resumed';
    this.start($this.elapsedTime);
  },
  restart: function() {
    this.stop();
    this.start();
  },
  stop: function() {
    this.status = 'stopped';
  }
}

const icons = ["fa fa-facebook-official", "fa fa-instagram", "fa fa-linkedin-square",
  "fa fa-skype", "fa fa-snapchat", "fa fa-twitch", "fa fa-twitter", "fa fa-youtube",
  "fa fa-facebook-official", "fa fa-instagram", "fa fa-linkedin-square", "fa fa-skype",
  "fa fa-snapchat", "fa fa-twitch", "fa fa-twitter", "fa fa-youtube"
]
shuffle(icons);


// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}



let openedCards = [];
let matchedCards = [];
let moves = 0;
let starsHtml = "";
let finalTime = "";
minutes
seconds

const deck = document.querySelector('.deck');

function startGame() {
  for (let i = 0; i < icons.length; i++) {
    const card = document.createElement('li');
    card.classList.add('card');
    card.innerHTML = "<i class ='" + icons[i] + "'</i>";
    deck.appendChild(card);

    $(card).on('click', function() {
      $(card).addClass('open show freeze');
      if ($(card).hasClass('open show freeze'));
      openedCards.push(card);

      var firstPick = openedCards[0];
      var secondPick = openedCards[1];

      if (firstPick.innerHTML === secondPick.innerHTML) {
        $(firstPick).addClass('match');
        $(secondPick).addClass('match');
        matchedCards.push(firstPick);
        matchedCards.push(secondPick);

        openedCards.length = 0;

        won();
        rating();



      } else {
        setTimeout(function() {
          $(firstPick).removeClass('open show freeze');
          $(secondPick).removeClass('open show freeze');
        }, 800);
      }

      addMove();

      openedCards.length = 0;

    })
  }


  timer.start();

  function rating() {
    if (moves > 12 && moves <= 19) {
      stars.innerHTML = star + star;
    } else if (moves >= 19) {
      stars.innerHTML = star;
    } else {
      stars.innerHTML = star + star + star;
    }
  }

  const totalMoves = document.querySelector('.moves');

  function addMove() {
    moves++;
    totalMoves.innerHTML = moves;
    rating();
  }
}
/*
 * STARS
 */
const stars = document.querySelector('.stars');
const star = `<i class="fa fa-star"></i>`;
stars.innerHTML = star + star + star;



/*
 * TIMER
 */

var sec = 0;

//function startTime(val) { return val > 9 ? val : "0" + val; }
//var timer = setInterval(function() {
//    $("#seconds").html(startTime(++sec % 60));
//    $("#minutes").html(startTime(parseInt(sec / 60, 10)));
//}, 1000);
// helper code https://stackoverflow.com/questions/5517597/plain-count-up-timer-in-javascript

function won() {
  if (matchedCards.length === 16) {

    timer.stop();

    //clearInterval(timer);
    $("#minutes").html = minutes;
    $("#seconds").html - seconds;
    showModal();
  }
}


var modal = document.getElementById('modal');

function writeStats() {
  const total_moves = document.querySelector('#totalMoves');
  total_moves.innerHTML = moves;

  const finalTime = document.querySelector('#totalTime');
  const minutesText = document.querySelector('#minutes').innerText;
  const secondsText = document.querySelector('#seconds').innerText;
  finalTime.innerHTML = `${minutesText}:${secondsText}`;

  const starsHtml = document.querySelector('#finalStars');
  starsHtml.innerHTML = stars.innerHTML;
}

function showModal() {
  modal.style.display = "block";
  writeStats();
}



/* Event listeners */
restartBtn.addEventListener('click', function() {
  deck.innerHTML = '';
  startGame();
  matchedCards = [];
  moves = 0;
  updateMoves.innerHTML = moves;
  pad();
  stars.innerHTML = starIcon + starIcon + starIcon;
  shuffle(icons);
});

yesBtn.addEventListener('click', function() {
  modal.style.display = "none";
  deck.innerHTML = '';
  startGame();
  matchedCards = [];
  moves = 0;
  updateMoves.innerHTML = moves;
  pad();
  stars.innerHTML = starIcon + starIcon + starIcon;
  shuffle(icons);
});

noBtn.addEventListener('click', function() {
  modal.style.display = "none";
});


///
startGame();
rating();
//startTime();
gameOver();

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff url('../img/geometry2.png');
  /* Background pattern from Subtle Patterns */
  font-family: 'Coda', cursive;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}


/*
 * Styles for the deck of cards
 */

.deck {
  width: 660px;
  min-height: 680px;
  background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
  padding: 32px;
  border-radius: 10px;
  box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 3em;
}

.deck .card {
  height: 125px;
  width: 125px;
  background: #2e3d49;
  font-size: 0;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
  transform: rotateY(0);
  background: #02b3e4;
  cursor: default;
}

.deck .card.show {
  font-size: 33px;
}

.deck .card.match {
  cursor: default;
  background: #02ccba;
  font-size: 33px;
}

.deck .card.freeze {
  pointer-events: none;
}


/*
 * Styles for the Score Panel
 */

.score-panel {
  text-align: left;
  width: 345px;
  margin-bottom: 10px;
}

.score-panel .stars {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin: 0 5px 0 0;
}

.score-panel .stars li {
  list-style: none;
  display: inline-block;
}

.score-panel .restart {
  float: right;
  cursor: pointer;
}

.modal {
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.modal-content {
  background-color: #fefefe;
  text-align: center;
  margin: auto;
  padding: 25px;
  border: 2px solid #888;
  border-radius: 10px;
  width: 50%;
  height: 50%;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Matching Game</title>
  <meta name="description" content="">
  <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
  <link rel="stylesheet" href="css/app.css">
</head>

<body>

  <div class="container">
    <header>
      <h1>Matching Game</h1>
    </header>

    <section class="score-panel">
      <ul class="stars" id="stars">
        <li><i class="fa fa-star"></i></li>
        <li><i class="fa fa-star"></i></li>
        <li><i class="fa fa-star"></i></li>
      </ul>


      <span class="moves">0</span> Moves

      <span id="minutes"></span>:<span id="seconds"></span>

      <div class="modal" id="modal">

        <div class="modal-content">
          <p>Congratulations!</p>
          <p>You won with</p>
          <p><span id=totalMoves></span> moves and <span id=finalStars></span> stars</p>
          <p>You finished in:<span id=totalTime></span></p>
          <p>Play Again?</p>
          <button id="yesBtn">Yes</button>
          <button id="noBtn">No! </button>
        </div>

        <div class="restart"></div>
        <i class="fa fa-repeat" id="restartBtn"></i>
      </div>

    </section>

    <ul class="deck">

    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <script src="js/app.js"></script>
</body>

</html>

Your answer is brilliant but not really what I need for this project. I just need a simple timer that starts on card click and resets and restarts after the yes button is clicked on the modal. — newdev217, Oct 07 '18 at 14:33
I have merged my answer with your example, i just added 2 lines of code with the `timer` object https://jsfiddle.net/2rbwnjyh/ — darklightcode, Oct 07 '18 at 14:57

a new timer loads each time a new card is clicked

2 Answers2