実装したカウントダウンタイマーを減算する処理をしたい

Question

解決したいこと
Javascript と HTML で表示された数字を偶数か奇数かに分けるという簡単なゲームを作りました。
その中でタイマーを実装し、一通り形にはなったのですが、ミスをした際にタイマーを何秒か減らすという仕様を実装しようとしたところどうしていいかわからなくなってしまいました。

試したこと
startメソッドの外にreduceTimeを記述する、など。
this.leftTimeが別のプロパティとなってしまう？

`use strict`
{

  
  class Timer{
    constructor(){
      this.intervalId = NaN;  //startするとintervalId に setIntervalが代入され、stopが実行されるとNaNが代入される
      this.timerElm = document.getElementById("timer");
      this.timeLimit  = 30 * 1000;
    }
    
    start(timeoverCallback){
      if(!Number.isNaN(this.intervalId)){//Timer がすでに始まっていれば error を投げる
        throw new Error(`Timer has already started`);
      }
      this.startTime = Date.now();
      this.intervalId = setInterval(()=>{  
        this.passedTime = Date.now() - this.startTime;
        this.leftTime = this.timeLimit - this.passedTime;
        this.displayTime = new Date(this.leftTime);
        this.ss = ((`0` + this.displayTime.getSeconds()).slice(-2));
        this.milli = ((`0` + this.displayTime.getMilliseconds()).slice(-2));
        this.timerElm.textContent = `${this.ss}:${this.milli}`;
        
        function reduceTime(){
          this.leftTime = (this.leftTime - 2 * 1000);      
        }
        this.start.reduceTime();


        if(this.passedTime >= this.timeLimit){
          this.stop();
          console.log("stop!");
          timeoverCallback();    //timer 終了と同時に、endGame()を呼び出すために、関数を引数として受け取れるようにしておく
        }//このif文はsetIntervalの中じゃないとだめみたい、、、なんでだろう

      },10);
      
    }
    
    stop(){
      clearInterval(this.intervalId);
      this.timerElm.textContent = "00:00";
      this.intervalId = NaN;
    }
    

  }
  
  class Questions{
    constructor(){
      
      this.startElm = document.getElementById("start");
      this.questionElms = [
        document.getElementById("question5"),
        document.getElementById("question4"),
        document.getElementById("question3"),
        document.getElementById("question2"),
        document.getElementById("question1"), 
      ]
      this.scoreElm = document.getElementById("score");
      this.scoreCount = 0;

      this.missElm = document.getElementById("miss");
      this.missCount = 0;
      
      this.numbers = [1,2,3,4,5,6,7,8,9];
      this.timer = new Timer();
      this.isPlaying = false;
    }
    
    startGame(){
      if(this.isPlaying === true){
        return;
      }
      
      this.makeFirstQuestions();
      this.isPlaying = true;
      //タイマー終了時にendGame()を呼ぶ
      this.timer.start(() => {
        this.endGame();
      });

      
    }

    makeFirstQuestions(){
      //scoreCount missCount と start ボタンを設定
      this.scoreCount = 0;
      this.scoreElm.textContent = this.scoreCount;
      
      this.missCount = 0;
      this.missElm.textContent = this.scoreCount;

      this.startElm.textContent = "restart";
      for(let n = 0; n < this.questionElms.length; n++){
        //最初に1~9をランダムに取得してquestion1~5につっこむ
        this.questionElms[n].textContent = this.numbers[Math.floor(Math.random() * this.numbers.length)];
        // console.log(this.questionElms[n].textContent);
      }
    }

    addQuestions(){
      //question[n]に入ってる数字を[n-1]の部分に代入（数字をおろす）、最後にquestion5のところに新しい数字を突っ込む
      for(let n = this.questionElms.length - 1 ; n > 0 ; n--){
        this.questionElms[n].textContent = this.questionElms[n -1].textContent;
      }
      this.questionElms[0].textContent = this.numbers[Math.floor(Math.random() * this.numbers.length)];
      // this.questionElms.forEach((item) =>{
      //   console.log("スタート後",item.textContent);
      // });
    }
    
    judgeNumbers(num){//偶数か、奇数か判断、
      if(this.isPlaying === false){
        return;
      }
      if(this.questionElms[this.questionElms.length -1].textContent % 2 === num){
        this.scoreCount++;
        this.scoreElm.textContent = this.scoreCount;
        
      }else{
        this.missCount++;
        this.missElm.textContent = this.missCount;
        this.timer.start.reduceTime();
      }
      console.log(this.scoreElm);
      this.addQuestions();
    }

    endGame(){
      this.isPlaying = false;
      
      setTimeout(()=>{alert(`Your score is ${this.scoreCount} and miss is ${this.missCount}`);},500);
      //画面の文章を消去して、メッセージを表示
      for(let n = 0; n < this.questionElms.length; n++){
        this.questionElms[n].textContent = null;
      }
      this.questionElms[3].textContent = "Press \"restart\" to replay";
    }

  }//class questions ends


  const questions = new Questions();

  questions.startElm.addEventListener(`click`, () =>{
    //スタート押したらゲームを起動
    questions.startGame();

    })
    window.addEventListener(`keydown`,eventhandler,{passive: false} )

      function eventhandler(e){
        if(e.keyCode === 37){
          questions.judgeNumbers(1);
          e.preventDefault();    //画面のスクロール防止
          
        }
        
        if(e.keyCode === 39){
          questions.judgeNumbers(0);
          e.preventDefault();
        }
      }

}//use strict end

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" href = "quiz.css">

  </head>
  <body>
    <section class = "container">
      <!-- sectionは囲んだ部分をひとまとまりとしてみてくれる -->
      <p>Judge numbers, is it odd or even?</p>

      <div class = "screen">
        <p id = "question5"><br></p>
        <p id = "question4"><br></p>
        <p id = "question3"><br></p>
        <p id = "question2"><br></p>
        <p id = "question1"><br></p>
      </div>
      <p>
        <span class = "command">奇数(press "←")</span><span class = "command">偶数(press "→")</span>
      </p>
      <p>Time   <span id = "timer">00:00</span></p>
      <p><button id = "start">start</button>
      score : <span id = "score">0</span> miss : <span id = "miss">0</span></p>
      

    </section>

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



</html>
コード

Answer 1

迅速な回答ありがとうございました！

Answer 2

カウンターをおなじスコープ内で参照・変更可能な状態にすると楽です

• codepen counter sub