How to stop the time automatically when all cards are flipped in memory game using javascript

Question

I'm having trouble here on how to stop the timer in my memory game. I already try the stop function that I found in the tutorial and google but it didn't work out. Here is my code:

const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let matchCounter=0;


function flipCard() {
  if (lockBoard) return;
  if (this === firstCard) return;

  this.classList.add('flip');

  if (!hasFlippedCard) {
    hasFlippedCard = true;
    firstCard = this;

    return;
  }

  secondCard = this;
  checkForMatch();
}

function checkForMatch() {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

  if(isMatch){
    matchCounter+=1;
   disableCards();
     if(matchCounter==(cards.length/2)){
      Swal.fire({
        title: 'Congratualtions!!!',
        text: 'You finish the game. Thank you for playng.' ,
      })
      }
   }
   else{ unflipCards(); }

  
}

function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

  resetBoard();
}

function unflipCards() {
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');

    resetBoard();
  }, 500);
}

function resetBoard() {
  hasFlippedCard = false;
  lockBoard = false;
  firstCard = null;
  secondCard = null;
 
  
}

(function shuffle() {
  cards.forEach(card => {
    let randomPos = Math.floor(Math.random() * 12);
    card.style.order = randomPos;
  });
})();

cards.forEach(card => card.addEventListener('click', flipCard));

function restartButton(){
  location.reload();
}
var i = 0;
function timer(){
  i++;
  if(i === 1){
    time();
  }
}

var numr = 0;
function countClick(){
  numr ++;
  console.log(numr);
}

/*Timer*/

function time(){
 
  // var target = document.getElementsById("back");
  // target.removeAttribute("onclick");
  var minutesLabel = document.getElementById("minutes");
  var secondsLabel = document.getElementById("seconds");
  var totalSeconds = 0;
  setInterval(setTime, 1000);
  
  function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds % 60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
  }
  
  function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
      return "0" + valString;
    } else {
      return valString;
    }
  }
}

var counterVal = 0;

function incrementClick(){
  updateDisplay(++counterVal);
}
function resetCounter(){
  counterVal = 0;
  updateDisplay(counterVal);
}
function updateDisplay(val){
  document.getElementById("counter-label").innerHTML = val;
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: url('https://github.com/FoxyStoat/memory-game/blob/master/assets/img/ignasi_pattern_s.png?raw=true');
  ;
}
h1{
  font-weight: 400;
  text-shadow: 1px 1px 2px rgba(80, 80, 80, 0.6);
}

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

.memory-game {
  width: 640px;
  height: 640px;
  display: flex;
  flex-wrap: wrap;
  perspective: 100%;
  margin:5px;
}

.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin:5px;
  /* position: relative; */
  /* transform: scale(1); */
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  /* padding: 1px; */
  position: absolute;
  /* border-radius: 5px; */
  /* background: #1C7CCC; */
  backface-visibility: hidden;
}

.front-face {
  transform: rotateY(180deg);
}

.score-panel {
  text-align: left;
  width: 545px;
  margin-bottom: 10px;
  color: #0d0d0e;
}

.score-panel .stars {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin: 0 5px 0 0;
  color: rgb(24, 23, 23);
}

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

.score-panel .timer {
  display: inline;
  position: absolute;
  left: 56%;
}

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


@media only screen  and (min-device-width: 768px)
  and (max-device-width: 1024px){
     .memory-game{
      width: 860px;
      min-height: 880px;


    }
}
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px) {
    .memory-game{
      width: 860px;
      min-height: 880px;


    }
  }

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px) {
    .memory-game{
      width: 860px;
      min-height: 880px;


    }
  }




  

Memory Game






    
    




  

  Memory Game
  
            

            Moves 0

            
                00:00

Whenever all the cards are flipped the sweet alert will pop up and show the congratulation message but the timer will continue to run despite that the game is finished. I want to stop the timer when all cards are flipped. Thank you in advance for answering. I apologize for my noobness. Kind of new to programming and currently I'm self-thought.

user_5665870 · Answer

As the guide for setInterval:

setInterval returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval.

So the answer is uses one variable (timerCtrl in below demo) to save the return value of setInterval, then clearInterval when game over.

const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let matchCounter=0;
let timerCtrl = null; // store the return value of setInterval

function flipCard() {
  if (lockBoard) return;
  if (this === firstCard) return;

  this.classList.add('flip');

  if (!hasFlippedCard) {
    hasFlippedCard = true;
    firstCard = this;

    return;
  }

  secondCard = this;
  checkForMatch();
}

function checkForMatch() {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

  if(isMatch){
    matchCounter+=1;
   disableCards();
     if(matchCounter==(cards.length/2)){
      Swal.fire({
        title: 'Congratualtions!!!',
        text: 'You finish the game. Thank you for playng.' ,
      })
      clearInterval(timerCtrl); // it will stop the timer
      }
   }
   else{ unflipCards(); }

  
}

function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

  resetBoard();
}

function unflipCards() {
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');

    resetBoard();
  }, 500);
}

function resetBoard() {
  hasFlippedCard = false;
  lockBoard = false;
  firstCard = null;
  secondCard = null;
 
  
}

(function shuffle() {
  cards.forEach(card => {
    let randomPos = Math.floor(Math.random() * 12);
    card.style.order = randomPos;
  });
})();

cards.forEach(card => card.addEventListener('click', flipCard));

function restartButton(){
  location.reload();
}
var i = 0;
function timer(){
  i++;
  if(i === 1){
    time();
  }
}

var numr = 0;
function countClick(){
  numr ++;
  console.log(numr);
}

/*Timer*/

function time(){
 
  // var target = document.getElementsById("back");
  // target.removeAttribute("onclick");
  var minutesLabel = document.getElementById("minutes");
  var secondsLabel = document.getElementById("seconds");
  var totalSeconds = 0;
  timerCtrl = setInterval(setTime, 1000);
  
  function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds % 60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
  }
  
  function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
      return "0" + valString;
    } else {
      return valString;
    }
  }
}

var counterVal = 0;

function incrementClick(){
  updateDisplay(++counterVal);
}
function resetCounter(){
  counterVal = 0;
  updateDisplay(counterVal);
}
function updateDisplay(val){
  document.getElementById("counter-label").innerHTML = val;
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: url('https://github.com/FoxyStoat/memory-game/blob/master/assets/img/ignasi_pattern_s.png?raw=true');
  ;
}
h1{
  font-weight: 400;
  text-shadow: 1px 1px 2px rgba(80, 80, 80, 0.6);
}

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

.memory-game {
  width: 640px;
  height: 640px;
  display: flex;
  flex-wrap: wrap;
  perspective: 100%;
  margin:5px;
}

.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin:5px;
  /* position: relative; */
  /* transform: scale(1); */
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  /* padding: 1px; */
  position: absolute;
  /* border-radius: 5px; */
  /* background: #1C7CCC; */
  backface-visibility: hidden;
}

.front-face {
  transform: rotateY(180deg);
}

.score-panel {
  text-align: left;
  width: 545px;
  margin-bottom: 10px;
  color: #0d0d0e;
}

.score-panel .stars {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin: 0 5px 0 0;
  color: rgb(24, 23, 23);
}

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

.score-panel .timer {
  display: inline;
  position: absolute;
  left: 56%;
}

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


@media only screen  and (min-device-width: 768px)
  and (max-device-width: 1024px){
     .memory-game{
      width: 860px;
      min-height: 880px;


    }
}
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px) {
    .memory-game{
      width: 860px;
      min-height: 880px;


    }
  }

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px) {
    .memory-game{
      width: 860px;
      min-height: 880px;


    }
  }




  

Memory Game






    
    




  

  Memory Game
  
            

            Moves 0

            
                00:00

How to stop the time automatically when all cards are flipped in memory game using javascript

1 Answers