Simon Zipline Feedback & Issue: Sound/Colors Firing Twice

Simon Zipline Feedback & Issue: Sound/Colors Firing Twice
0

#1

I am nearly finished with this one (haven’t refactored yet), but got stuck on a small detail. Whenever the first color / sound in the sequence plays back for the first time only it fires twice. Every sequence after performs as expected. Have tried console logging all over the place and can’t seem to figure this one out! :expressionless: maybe it’s obvious to one of you?

function startGame(){
  startBtn.style.transform =`translateX(-1000%)`;
  displayText.textContent = `${turn<10?'0'+turn:turn}`;
  currentColor = getColor(1,5);
  memoryArray.push(currentColor);
    for (let i=0; i<memoryArray.length; i++){
      (function(ind){
        let audio;
        setTimeout(function(){
          switch(memoryArray[i]){
            case 1:
              rBtn.style.opacity="0";
              document.getElementById('audio1').load();
              document.getElementById('audio1').play();
              liteR();
              setTimeout(function(){
                deLiteR();
                rBtn.style.opacity="";
              }, 300);
              break;
            case 2:
              document.getElementById('audio2').load();
              document.getElementById('audio2').play();
              gBtn.style.opacity="0";
              liteG();
              setTimeout(function(){
                deLiteG();
                gBtn.style.opacity="";
              }, 300);
              break;
            case 3:
              document.getElementById('audio3').load();
              document.getElementById('audio3').play();
              bBtn.style.opacity="0";
              liteB();
              setTimeout(function(){
                deLiteB();
                bBtn.style.opacity="";
              }, 300);
              break;
            case 4:
              document.getElementById('audio4').load();
              document.getElementById('audio4').play();
              yBtn.style.opacity="0";
              liteY();
              setTimeout(function(){
                deLiteY();
                yBtn.style.opacity="";
              }, 300);
              break;
          }
        }, 400 + (500*ind));
      })(i);
    }

  let currentIndex;
  function setBtns(){
    btns.forEach(button=>{
      button.removeEventListener('click', checkAnswer);
    })
    currentIndex = memoryArray[index];
    if(currentIndex === undefined){
      turn++;
      startGame();
    }else{
      btns.forEach(button=>{
        button.addEventListener('click', checkAnswer);
      });
    }
  }

  // reset index
  index=0;
  setBtns();

  function checkAnswer(){
    if(this.classList.contains(`_${currentIndex}`)){
      document.getElementById(`audio${currentIndex}`).load();
      document.getElementById(`audio${currentIndex}`).play();
      index++;
      setBtns();
    } else{
      flash = setInterval(function(){
        setTimeout(function(){
          displayText.textContent = '';
        },100);
        displayText.textContent = 'XX';
      },200);
      setTimeout(function(){
        clearInterval(flash);
        setTimeout(function(){
          if(turn===0){
            displayText.textContent ='00';
          }else{
            displayText.textContent = `${turn<10?'0'+turn:turn}`;
          }
        }, 100);
      }, 1000);
    }
  }
}

Link to project…