单击两次以上按钮时如何避免游戏崩溃？

Question

我正在编写一个Simon游戏，其中遇到一些问题，当您在一个按钮上单击两次以上时，该游戏将崩溃。只要重新加载页面，所有四个按钮就会同时点亮，并且您不再可以播放。

我不知道该怎么办。如果我需要使用一个函数，如果单击两次以上，将阻塞所有四个按钮，并在事件处理程序上使游戏在800之后继续进行。

问题可能是我打电话给clearColor()太近了，无法闪烁第一种颜色。

我试图避免在调用play（）之前立即在开始按钮单击事件处理程序中调用clearColor，但也没有结果。

这是代码示例：

let blueBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
let redBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
let yellowBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
let greenBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
//======================//
let organization = [];
let playerOrder = [];
let flash;
let turn;
let good;
let compTurn;
let intervalId;
let strict = false;
let noise = true;
let on = false;
let win;
//======================//
// VARIABLES - DOM QUERIES

const btnBlue = document.querySelector("#btnBlue");
const btnGreen = document.querySelector("#btnGreen");
const btnRed = document.querySelector("#btnRed");
const btnYellow = document.querySelector("#btnYellow");

const turnCounter = document.querySelector("#turn");
const startButton = document.querySelector("#startButton");
const gameButton = document.querySelector(".gameButton"); //button start (not used)
const strictButton = document.querySelector("#strict");
const turnOnButton = document.querySelector("#on");


//Setthings buttons
strictButton.addEventListener('click', function(event) {
  if (strictButton.checked == true) {
    strict = true;
  }
  else {
    strict = false;
  }
});

turnOnButton.addEventListener('click', function(event) {
  if (turnOnButton.checked == true) {
    on = true;
    turnCounter.innerHTML = "-";
  }
  else {
    on = false;
    turnCounter.innerHTML = "";
    clearColor();
    clearInterval(intervalId);
  }
});

startButton.addEventListener('click', function(event) {
  if (on || win) {

    play(); 

    clearColor();
  }
});

function play() {
  win = false;
  organization = [];
  playerOrder = [];
  flash = 0;
  intervalId = 0;
  turn = 1;
  turnCounter.innerHTML = 1;
  good = true;
  for (var i = 0; i < 20; i++) {
    organization.push(Math.floor(Math.random() * 4) + 1);
  }
  compTurn = true;

  intervalId = setInterval(gameTurn, 800);
}

function gameTurn() {

  on = false;
  if (flash == turn) {
    clearInterval(intervalId);
    compTurn = false;
    clearColor();
    on = true;
  }
  if (compTurn) {
    clearColor();
    setTimeout(function() {
      if (organization[flash] == 1) first();
      if (organization[flash] == 2) second();
      if (organization[flash] == 3) third();
      if (organization[flash] == 4) fourth();
      flash++;
    }, 200);
  }
}

function first() {
  if (noise) {
    greenBtnAudio.play();
  }
  noise = true;
  btnGreen.style.backgroundColor = "lightgreen";
}

function second() {
  if (noise) {
    redBtnAudio.play();
  }
  noise = true;
  btnRed.style.backgroundColor = "tomato";
}

function third() {
  if (noise) {
    yellowBtnAudio.play();
  }
  noise = true;
  btnYellow.style.backgroundColor = "yellow";
}

function fourth() {
  if (noise) {
    blueBtnAudio.play();
  }
  noise = true;
  btnBlue.style.backgroundColor = "lightskyblue";
}

function clearColor() {
  btnGreen.style.backgroundColor = "darkgreen";
  btnRed.style.backgroundColor = "darkred";
  btnYellow.style.backgroundColor = "goldenrod";
  btnBlue.style.backgroundColor = "darkblue";
}

function btnLightColor() {
  btnGreen.style.backgroundColor = "lightgreen";
  btnRed.style.backgroundColor = "tomato";
  btnYellow.style.backgroundColor = "yellow";
  btnBlue.style.backgroundColor = "lightskyblue";
}

btnGreen.addEventListener('click', function(event) {
  if (on) {
    playerOrder.push(1);
    check();
    first();
    if (!win) {
      setTimeout(function() {
        clearColor();
      }, 300);
    }
  }
})

btnRed.addEventListener('click', function(event) {
  if (on) {
    playerOrder.push(2);
    check();
    second();
    if (!win) {
      setTimeout(function() {
        clearColor();
      }, 300);
    }
  }
})

btnYellow.addEventListener('click', function(event) {
  if (on) {
    playerOrder.push(3);
    check();
    third();
    if (!win) {
      setTimeout(function() {
        clearColor();
      }, 300);
    }
  }
})

btnBlue.addEventListener('click', function(event) {
  if (on) {
    playerOrder.push(4);
    check();
    fourth();
    if (!win) {
      setTimeout(function() {
        clearColor();
      }, 300);
    }
  }
})

function check() {
  if (playerOrder[playerOrder.length - 1] !== organization[playerOrder.length - 1])
    good = false;

  if (playerOrder.length == 20 && good) {
    winGame();
  }

  if (good == false) {
    btnLightColor();
    turnCounter.innerHTML = "NO!";
    setTimeout(() => {
      turnCounter.innerHTML = turn;
      clearColor();

      if (strict) {
        play();
      }
      else {
        compTurn = true;
        flash = 0;
        playerOrder = [];
        good = true;
        intervalId = setInterval(gameTurn, 100);
      }
    }, 100);

    noise = false;
  }

  if (turn == playerOrder.length && good && !win) {
    turn++;
    playerOrder = [];
    compTurn = true;
    flash = 0;
    turnCounter.innerHTML = turn;
    intervalId = setInterval(gameTurn, 800);
  }

}

function winGame() {
  btnLightColor();
  turnCounter.innerHTML = "WIN!";
  on = false;
  win = true;
}

<html>
<body>
<div class="container " id="meBaby">

    <!--SETTHINGS BUTTONS-->
    <div class="row section2">
      <div class="scoreName col-sm-4">
        <label for="score" class="labeStyle">Score</label>
        <div class="score" id="turn" value="score">
        </div>
      </div>
      <div class="col-sm-4 strict-style  ">
        <label for="strict" class="labeStyle">Strict</label>
        <input type="checkbox" class="toggle" id="strict" value="strict">
      </div>
      <div class="col-sm-4 power-style">
        <label for="power" class="labeStyle">Power</label>
        <input type="checkbox" id="on" value="power">
      </div>
    </div>


    <div class="row justify-content-center">
      <div class="col-sm-4 offset-sm-2 ">
        <button id="startButton" class="push_button red">start</button>
      </div>
    </div>
    <!--FOUR GAME BUTTON-->
    <div class="container potrait">
      <div class="row">
        <div class="fourButtons col-sm-4 offset-sm-4">
          <div class="buttonCollor">
            <div class="top-row">
              <div id="btnBlue" class="gamebutton card-1"></div>
            </div>
            <div class="middle-row">
              <div id="btnGreen" class="gamebutton card-1"></div>
              <div id="btnRed" class="gamebutton card-1"></div>
            </div>
            <div class="bottom-row">
              <div id="btnYellow" class="gamebutton card-1"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

  <!--Script link-->
  <script type="text/javascript" src="assets/scripts/script.js"></script>
  <script type="text/javascript" src="assets/scripts/style.js"></script>
</body>

</html>

因此，我要获得的结果是，如果四个，三个按钮中的黄色，绿色，蓝色和红色按钮中的任何一个被单击了两次以上，则所有四个按钮都被阻止单击，然后按原样返回游戏无需重新加载游戏。