Как добавить таймер в этом коде, используя javascript?

Question

У меня есть этот код ниже для игры памяти, реализованной с использованием javaScript, HTML и CSS, но мне не удалось добавить таймер (показывается как время в минутах и ​​секундах, когда игра начинается и заканчивается, когда игра заканчивается) Я попробовал некоторый код, как вы видите ниже, но он не работал со мной. если кто-нибудь может помочь, я был бы благодарен: D

class MixOrMatch {
    constructor(totalTime, cards) {
        this.cardsArray = cards;
        this.totalTime = totalTime;
        this.timeRemaining = totalTime;
        this.timer = document.getElementById('timer')
        this.ticker = document.getElementById('flips');
        // this.audioController = new AudioController();
    }

    startGame() {
        this.totalClicks = 0;
        this.timeRemaining = this.totalTime;
        this.cardToCheck = null;
        this.matchedCards = [];
        this.busy = true;
        setTimeout(() => {
            // this.audioController.startMusic();
            this.shuffleCards(this.cardsArray);
            this.countdown = this.startCount();
            this.busy = false;
        
        }, 500)
        this.hideCards();
        this.timer.innerText = this.timeRemaining;
        this.ticker.innerText = this.totalClicks;
    }

    
    startCount() {
        return setInterval(() => {
            timer.innerHTML = minute+"mins "+second+"secs";
            this.timeRemaining++;
            this.timer.innerText = this.timeRemaining;
            second++;
            if(second == 60){
                minute++;
                second=0;
            }
            if(minute == 60){
                hour++;
                minute = 0;
            }
        }, 1000);
    }
    // gameOver() {
    //     clearInterval(this.countdown);
    //     // this.audioController.gameOver();
    //     document.getElementById('game-over-text').classList.add('visible');
    // }
    victory() {
        clearInterval(this.countdown);
        // this.audioController.victory();
        document.getElementById('victory-text').classList.add('visible');
    }
    hideCards() {
        this.cardsArray.forEach(card => {
            card.classList.remove('visible');
            card.classList.remove('matched');
        });
    }
    flipCard(card) {
        if(this.canFlipCard(card)) {
            // this.audioController.flip();
            this.totalClicks++;
            this.ticker.innerText = this.totalClicks;
            card.classList.add('visible');

            if(this.cardToCheck) {
                this.checkForCardMatch(card);
            } else {
                this.cardToCheck = card;
            }
        }
    }
    checkForCardMatch(card) {
        if(this.getCardType(card) === this.getCardType(this.cardToCheck))
            this.cardMatch(card, this.cardToCheck);
        else 
            this.cardMismatch(card, this.cardToCheck);

        this.cardToCheck = null;
    }
    cardMatch(card1, card2) {
        this.matchedCards.push(card1);
        this.matchedCards.push(card2);
        card1.classList.add('matched');
        card2.classList.add('matched');
        // this.audioController.match();
         if(this.matchedCards.length === this.cardsArray.length)
             this.victory();
    }
    cardMismatch(card1, card2) {
        this.busy = true;
        setTimeout(() => {
            card1.classList.remove('visible');
            card2.classList.remove('visible');
            this.busy = false;
        }, 1000);
    }
    shuffleCards(cardsArray) { // Fisher-Yates Shuffle Algorithm.
        for (let i = cardsArray.length - 1; i > 0; i--) {
            let randIndex = Math.floor(Math.random() * (i + 1));
            cardsArray[randIndex].style.order = i;
            cardsArray[i].style.order = randIndex;
        }
    }
    getCardType(card) {
        return card.getElementsByClassName('card-value')[0].src;
    }
    canFlipCard(card) {
        return !this.busy && !this.matchedCards.includes(card) && card !== this.cardToCheck;
    }
}

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready);
} else {
    ready();
}

function ready() {
    let overlays = Array.from(document.getElementsByClassName('overlay-text'));
    let cards = Array.from(document.getElementsByClassName('card'));
    let game = new MixOrMatch(100, cards);

    overlays.forEach(overlay => {
        overlay.addEventListener('click', () => {
            overlay.classList.remove('visible');
            game.startGame();
        });
    });

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

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="script.js" async></script>
  <link href="styles.css" rel="stylesheet">

  <title>Memory Game</title>
</head>

<body>
  <h1 class="page-title">MEMORY GAME</h1>
  <button class="overlay-text visible">
    Click to Start
  </button>
  <div id="game-over-text" class="overlay-text">
    GAME OVER
    <span class="overlay-text-small">Click to Restart</span>
  </div>
  <div id="victory-text" class="overlay-text">
    VICTORY
    <span class="overlay-text-small">Click to Restart</span>
  </div>

  <div class="game-container">
    <div class="game-info-container">
      <!-- <div class="game-info">
        Time <span id="time-remaining">0</span>
      </div> -->

      <div class="timer">
      </div>
      <div class="game-info">
        Flips <span id="flips">0</span>
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Bat.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Bat.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Bones.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Bones.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Cauldron.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Cauldron.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">


        <img class="card-value" src="Images/Eye.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Eye.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Skull.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Skull.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Pumpkin.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Pumpkin.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Ghost.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Ghost.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Dracula.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Dracula.png">
      </div>
    </div>
  </div>


</body>

</html>

Answer 1

<div class="timer">
</div>

вместо этого должно быть

<div id="timer">
</div>

, поскольку вы выбираете элемент по ID в вашем Javascript здесь

this.timer = document.getElementById('timer')

не по классу

также минуты и секунды не определены в вашей функции startCount(). Так должно быть

startCount() {
    let minute = 0;
    let second = 0;
        return setInterval(() => {
            timer.innerHTML = minute+"mins "+second+"secs";
            this.timeRemaining++;
            this.timer.innerText = this.timeRemaining;
            second++;
            if(second == 60){
                minute++;
                second=0;
            }
            if(minute == 60){
                hour++;
                minute = 0;
            }
        }, 1000);
    }