Javascript 为什么这段代码会在执行的某一点上混淆用户选择，我真的找不到问题所在

所以这是一个记忆游戏，eventlisteners在一系列div改变颜色模拟发光后确认用户输入，预期的行为是，一旦用户按正确的顺序单击正确的div，序列将开始再添加1个要照亮的div，直到到达阵列中的最后一个数字，然后函数会让您知道您赢了，或者如果您在任意点选择了错误的div，则会触发函数让您知道您输了，在这两种情况下，游戏再次开始。现在的问题是，在某一点上（werid事件是随机的，通常在4到6个div之间亮起），即使你选择了正确的div集，丢失的函数也会触发，当你重新开始游戏时（不刷新页面）该代码触发函数在第一次尝试时失败。用于检查和比较用户输入的函数为chooseColor（ev），用于跟踪级别（级别y sublvl）的变量设置为每次赢或输时重新启动

> <script>
      const boton = document.getElementById("btnEmpezar");

      const verde = document.getElementById("verde");
      const amarillo = document.getElementById("amarillo");
      const azul = document.getElementById("azul");
      const rojo = document.getElementById("rojo");
      const blanco = document.getElementById("blanco");

      const box1 = document.getElementById("box1");
      const box2 = document.getElementById("box2");
      const box3 = document.getElementById("box3");
      const box4 = document.getElementById("box4");

      const loser = document.getElementById("loser");
      const winner = document.getElementById("winner");

      let level = 0;
      const last_Lvl = 10;
      let sublvl = 0;
      const colores = {
        verde,
        amarillo,
        azul,
        rojo,
        blanco,
        box1,
        box2,
        box3,
        box4,
      };
      let timeoutIluminacion = null;

      let secuencia = new Array(10)
        .fill(0)
        .map((n) => Math.floor(Math.random() * 9));

      function generarSecuencia() {
        secuencia = new Array(10)
          .fill(0)
          .map((n) => Math.floor(Math.random() * 9));
        console.log(sublvl);
      }

      const nota1 = document.getElementById("audio1");
      const nota2 = document.getElementById("audio2");
      const nota3 = document.getElementById("audio3");
      const nota4 = document.getElementById("audio4");
      const nota5 = document.getElementById("audio5");
      const nota6 = document.getElementById("audio6");
      const nota7 = document.getElementById("audio7");
      const nota8 = document.getElementById("audio8");
      const nota9 = document.getElementById("audio9");

      function tocarNota(color) {
        switch (color) {
          case "rojo":
            return nota1.play();
          case "verde":
            return nota1.play();
          case "amarillo":
            return nota2.play();
          case "azul":
            return nota3.play();
          case "blanco":
            return nota5.play();
          case "box1":
            return nota6.play();
          case "box2":
            return nota7.play();
          case "box3":
            return nota8.play();
          case "box4":
            return nota9.play();
        }
      }

      function hideButton() {
        boton.classList.add("hide");

        setTimeout(enlightSequence, 500);
      }

      function enlightSequence() {
        for (let i = 0; i <= level; i++) {
          const color = transformarNumeroAColor(secuencia[i]);
          setTimeout(() => iluminarColor(color), 1400 * i);
          console.log(color);
        }
        agregarEventosClick();
      }

      function iluminarColor(color) {
        colores[color].classList.add("light");
        /*tocarNota(color)*/
        setTimeout(() => this.apagarColor(color), 350);
      }

      function apagarColor(color) {
        colores[color].classList.remove("light");
      }

      function transformarNumeroAColor(numero) {
        switch (numero) {
          case 0:
            return "rojo";
          case 1:
            return "verde";
          case 2:
            return "amarillo";
          case 3:
            return "azul";
          case 4:
            return "blanco";
          case 5:
            return "box1";
          case 6:
            return "box2";
          case 7:
            return "box3";
          case 8:
            return "box4";
        }
      }

      function transformarColorANumero(color) {
        switch (color) {
          case "rojo":
            return 0;
          case "verde":
            return 1;
          case "amarillo":
            return 2;
          case "azul":
            return 3;
          case "blanco":
            return 4;

          case "box1":
            return 5;
          case "box2":
            return 6;
          case "box3":
            return 7;
          case "box4":
            return 8;
        }
      }

      function agregarEventosClick() {
        colores.verde.addEventListener("click", this.chooseColor);
        colores.amarillo.addEventListener("click", this.chooseColor);
        colores.rojo.addEventListener("click", this.chooseColor);
        colores.azul.addEventListener("click", this.chooseColor);
        colores.blanco.addEventListener("click", this.chooseColor);

        colores.box1.addEventListener("click", this.chooseColor);
        colores.box2.addEventListener("click", this.chooseColor);
        colores.box3.addEventListener("click", this.chooseColor);
        colores.box4.addEventListener("click", this.chooseColor);
      }

      function eliminarEventosClick() {
        colores.verde.removeEventListener("click", this.chooseColor);
        colores.amarillo.removeEventListener("click", this.chooseColor);
        colores.rojo.removeEventListener("click", this.chooseColor);
        colores.azul.removeEventListener("click", this.chooseColor);
        colores.blanco.removeEventListener("click", this.chooseColor);

        colores.box1.removeEventListener("click", this.chooseColor);
        colores.box2.removeEventListener("click", this.chooseColor);
        colores.box3.removeEventListener("click", this.chooseColor);
        colores.box4.removeEventListener("click", this.choosecolor);
      }

      function chooseColor(ev) {
        const nombreColor = ev.target.dataset.color;
        const numeroColor = transformarColorANumero(nombreColor);
        iluminarColor(nombreColor);
        if (numeroColor === secuencia[sublvl]) {
          sublvl++;
          console.log(sublvl);
          if (sublvl > level) {
            eliminarEventosClick();
            level++;
            sublvl = 0;

            timeoutIluminacion = setTimeout(enlightSequence, 1500);
          }
          if (level === last_Lvl + 1) {
            eliminarEventosClick();
            setTimeout(secuenciaFinal, 700);
            clearTimeout(timeoutIluminacion);
          }
        } else {
          eliminarEventosClick();
          setTimeout(perdioJuego, 700);
        }
      }

      function ganoJuego() {
        winner.classList.remove("hide");

        setTimeout(start, 1000);
      }

      function start() {
        winner.classList.add("hide");
        boton.classList.remove("hide");
        level = 0;
        generarSecuencia();
      }

      function perdioJuego() {
        loser.classList.remove("hide");
        setTimeout(startos, 1000);
      }

      function startos() {
        loser.classList.add("hide");
        boton.classList.remove("hide");
        level = 0;
        sublvl = 0;
        generarSecuencia();
      }

      function secuenciaFinal() {
        eliminarEventosClick();
        for (let i = 0; i < 4; i++) {
          setTimeout(enlightSequenceFinal, 1000 * i);
        }

        setTimeout(ganoJuego, 4000);
      }

      function enlightSequenceFinal() {
        colores.amarillo.classList.add("light");
        colores.verde.classList.add("light");
        colores.rojo.classList.add("light");
        colores.azul.classList.add("light");

        setTimeout(TurnOffFinal, 500);
      }

      function TurnOffFinal() {
        colores.amarillo.classList.remove("light");
        colores.rojo.classList.remove("light");
        colores.verde.classList.remove("light");
        colores.azul.classList.remove("light");

        enlightSequenceFinal2();
      }

      function enlightSequenceFinal2() {
        colores.box1.classList.add("light");
        colores.box2.classList.add("light");
        colores.box3.classList.add("light");
        colores.box4.classList.add("light");
        setTimeout(TurnOffFinal2, 500);
      }

      function TurnOffFinal2() {
        colores.box1.classList.remove("light");
        colores.box2.classList.remove("light");
        colores.box3.classList.remove("light");
        colores.box4.classList.remove("light");
      }
    </script>



>  <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .gameboard {
        border: 2px solid black;
        width: 300px;
        height: 260px;
        display: flex;
        flex-wrap: wrap;
        background-color: black;
        border-radius: 5%;
        position: relative;
      }
      .polen {
        position: absolute;
        border: 3px solid black;
        border-radius: 50%;
        background-color: blueviolet;
        width: 75px;
        height: 75px;
        top: calc(0% - 50px);
        left: calc(-20% - 200px);
        z-index: 2;
      }

      .box {
        box-sizing: border-box;
        z-index: 0;
        height: 50%;
        width: 50%;
        border: 1px solid black;
        display: flex;
        margin: 0;
        border-radius: 5%;
      }
      .uno {
        background-color: rgba(0, 0, 223, 0.767);
        position: relative;
      }

      .uno.light {
        background-color: rgba(129, 129, 252, 0.767);
      }

      .dos {
        background-color: rgb(49, 122, 55);
      }
      .dos.light {
        background-color: rgb(102, 126, 104);
      }

      .tres {
        background-color: rgb(198, 209, 43);
        position: relative;
      }

      .tres.light {
        background-color: rgb(209, 212, 156);
      }

      .cuatro {
        background-color: rgb(177, 12, 12);
      }

      .cuatro.light {
        background-color: rgb(196, 111, 111);
      }

      .petado {
        width: 130px;
        height: 100px;
        border: 3px solid black;
        background-color: rgb(252, 255, 55);
        display: flex;
        align-self: flex-end;
        border-top-left-radius: 60%;
        border-bottom-right-radius: 50%;
        z-index: 1;
      }

      .petado.light {
        background-color: rgb(252, 253, 201);
      }

      .petado.dark {
        background-color: rgb(195, 197, 48);
      }

      .petaun {
        width: 130px;
        height: 100px;
        border: 3px solid black;
        display: flex;
        border-bottom-left-radius: 50%;
        border-top-right-radius: 60%;
        margin-bottom: 0;
        margin-left: 0;
        background-color: rgb(255, 0, 0);
        position: absolute;
        bottom: 0;
        right: 0;
      }

      .petaun.light {
        background-color: rgb(255, 129, 129);
      }

      .petaun.dark {
        background-color: rgb(177, 0, 0);
      }

      .petatre {
        width: 130px;
        height: 100px;
        border: 3px solid black;
        display: flex;
        position: absolute;
        right: 0;
        background-color: rgb(79, 255, 88);
        border-bottom-right-radius: 60%;
        border-top-left-radius: 50%;
      }

      .petatre.light {
        background-color: rgb(215, 253, 217);
      }

      .petatre.dark {
        background-color: rgb(65, 190, 71);
      }

      .petacua {
        width: 130px;
        height: 100px;
        border: 3px solid black;
        display: flex;
        background-color: blue;
        border-bottom-left-radius: 60%;
        border-top-right-radius: 50%;
      }

      .petacua.light {
        background-color: rgb(138, 138, 255);
      }

      .petacua.dark {
        background-color: rgb(0, 0, 211);
      }

      .polen {
        position: absolute;
        border: 10px solid black;
        border-radius: 50%;
        background-color: rgb(255, 255, 255);
        width: 45px;
        height: 45px;
        top: calc(50% - 33px);

        left: calc(50% - 33px);
      }

      .polen.light {
        background-color: rgb(133, 127, 127);
      }

      .polen.dark {
        background-color: rgb(207, 205, 205);
      }

      .boton {
        position: absolute;
        border: 5px solid rgb(255, 255, 255);
        color: aliceblue;
        border-radius: 50%;
        background-color: rgb(27, 26, 26);
        width: 60px;
        height: 60px;
        top: calc(50% - 31px);

        left: calc(50% - 30px);
        z-index: 4;
        font-size: 10px;
        overflow: hidden;
      }

      .boton.hide {
        display: none;
      }

      .boton:hover {
        border: 0.01px solid rgb(10, 10, 10);

        color: black;

        transition: 0.3s border ease-in 0.1s;
      }
      .boton:focus {
        outline: 0;
      }

      .resultado {
        height: 100%;
        width: 100%;
        z-index: 2;
        border-radius: 5%;
        color: white;
        font-size: 55px;
        background-color: black;
        font-family: monospace;
        text-align: center;
        position: absolute;
      }

      .resultados {
        height: 100%;
        width: 100%;
        z-index: 2;
        border-radius: 5%;
        color: white;
        font-size: 55px;
        background-color: black;
        font-family: monospace;
        text-align: center;
        position: absolute;
      }

      .resultado.hide {
        display: none;
      }

      .resultados.hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="gameboard">
      <div class="box uno" id="box1" data-color="box1">
        <div id="rojo" class="petaun" data-color="rojo"></div>
      </div>
      <div class="box dos" id="box2" data-color="box2">
        <div id="amarillo" class="petado" data-color="amarillo"></div>
      </div>
      <div class="box tres" id="box3" data-color="box3">
        <div id="verde" class="petatre" data-color="verde"></div>
      </div>
      <div class="box cuatro" id="box4" data-color="box4">
        <div id="azul" class="petacua" data-color="azul"></div>
      </div>
      <div id="blanco" class="polen" data-color="blanco"></div>
      <button id="btnEmpezar" class="boton" onclick="hideButton()">
        Start!
      </button>

      <div id="winner" class="resultado hide">
        <p>
          You <br />
          Win! :)
        </p>
      </div>
      <div id="loser" class="resultados hide">
        <p>
          :( <br />
          You lose!
        </p>
      </div>
    </div>

    <audio src="./notas/nota1.mp3" id="audio1" preload="metadata"></audio>
    <audio src="./notas/nota2.mp3" id="audio2" preload="metadata"></audio>
    <audio src="./notas/nota3.mp3" id="audio3" preload="metadata"></audio>
    <audio src="./notas/nota4.mp3" id="audio4" preload="metadata"></audio>

    <audio src="./notas/nota5.mp3" id="audio5" preload="metadata"></audio>
    <audio src="./notas/nota6.mp3" id="audio6" preload="metadata"></audio>
    <audio src="./notas/nota7.mp3" id="audio7" preload="metadata"></audio>
    <audio src="./notas/nota8.mp3" id="audio8" preload="metadata"></audio>
    <audio src="./notas/nota9.mp3" id="audio9" preload="metadata"></audio>

    
  </body>
</html>

>
const-boton=document.getElementById（“btnEmpezar”）；
const verde=document.getElementById（“verde”）；
const amarillo=document.getElementById（“amarillo”）；
const azul=document.getElementById（“azul”）；
const rojo=document.getElementById（“rojo”）；
const blanco=document.getElementById（“blanco”）；
const box1=document.getElementById（“box1”）；
const box2=document.getElementById（“box2”）；
const box3=document.getElementById（“box3”）；
const box4=document.getElementById（“box4”）；
const loser=document.getElementById（“loser”）；
const winner=document.getElementById（“winner”）；
设水平=0；
最后一级常数=10；
设sublvl=0；
常量颜色={
佛得角，
阿马里洛，
蓝色，
罗霍，
布兰科，
框1，
框2，
框3，
框4，
};
让timeoutIluminacion=null；
设secuencia=新数组（10）
.fill（0）
.map（（n）=>Math.floor（Math.random（）*9））；
函数generarSecurencia（）{
secuencia=新阵列（10）
.fill（0）
.map（（n）=>Math.floor（Math.random（）*9））；
控制台日志（sublvl）；
}
const nota1=document.getElementById（“audio1”）；
const nota2=document.getElementById（“audio2”）；
const nota3=document.getElementById（“audio3”）；
const nota4=document.getElementById（“audio4”）；
const nota5=document.getElementById（“audio5”）；
const nota6=document.getElementById（“audio6”）；
const nota7=document.getElementById（“audio7”）；
const nota8=document.getElementById（“audio8”）；
const nota9=document.getElementById（“audio9”）；
函数tocarNota（颜色）{
开关（彩色）{
“rojo”案：
返回nota1.play（）；
“verde”案：
返回nota1.play（）；
“amarillo”案：
返回nota2.play（）；
“azul”案：
返回nota3.play（）；
“布兰科”案：
返回nota5.play（）；
案例“框1”：
返回nota6.play（）；
案例“框2”：
返回nota7.play（）；
案例“框3”：
返回nota8.play（）；
案例“框4”：
返回nota9.play（）；
}
}
函数hideButton（）{
添加（“隐藏”）；
设置超时（enlightSequence，500）；
}
函数enlightSequence（）{
对于（设i=0；i暗彩色（颜色），1400*i）；
控制台。日志（颜色）；
}
agregarEventosClick（）；
}
函数iluminarColor（颜色）{
颜色[color].classList.add（“light”）；
/*托卡诺塔（彩色）*/
setTimeout（（）=>this.apagarColor（color），350）；
}
函数颜色（颜色）{
颜色[color].classList.remove（“light”）；
}
函数转换arnumeroacolor（numero）{
开关（数字）{
案例0：
返回“rojo”；
案例1：
返回“维德”；
案例2：
返回“amarillo”；
案例3：
返回“蓝色”；
案例4：
返回“布兰科”；
案例5：
返回“box1”；
案例6：
返回“box2”；
案例7：
返回“box3”；
案例8：
返回“box4”；
}
}
功能转换Arcoloranumero（彩色）{
开关（彩色）{
“rojo”案：
返回0；
“verde”案：
返回1；
“amarillo”案：
返回2；
“azul”案：
返回3；
“布兰科”案：
返回4；
案例“框1”：
返回5；
案例“框2”：
返回6；
案例“框3”：
返回7；
案例“框4”：
返回8；
}
}
函数agregareventoslick（）{
colores.verde.addEventListener（“单击”，this.chooseColor）；
colores.amarillo.addEventListener（“单击”，this.chooseColor）；
colors.rojo.addEventListener（“单击”，this.chooseColor）；
colores.azul.addEventListener（“单击”，this.chooseColor）；
colors.blanco.addEventListener（“单击”，this.chooseColor）；
colors.box1.addEventListener（“单击”，this.chooseColor）；
colors.box2.addEventListener（“单击”，this.chooseColor）；
colors.box3.addEventListener（“单击”，this.chooseColor）；
colors.box4.addEventListener（“单击”，this.chooseColor）；
}
函数eliminareventoslick（）{
colores.verde.removeEventListener（“单击”，this.chooseColor）；
colores.amarillo.removeEventListener（“单击”，this.chooseColor）；
colors.rojo.removeEventListener（“单击”，this.chooseColor）；
colores.azul.removeEventListener（“单击”，this.chooseColor）；
颜色。白色。去除
      function chooseColor(ev) {
        const nombreColor = ev.target.dataset.color;
        const numeroColor = transformarColorANumero(nombreColor);
        iluminarColor(nombreColor);
        if (numeroColor === secuencia[sublvl]) {

          // the rest of your code

        } else {

          // check here
          console.log("sublvl: " + sublvl);
          console.log("numeroColor: " + numeroColor);
          console.log("secuencia[sublvl]: " + secuencia[sublvl]);

          eliminarEventosClick();
          setTimeout(perdioJuego, 700);
        }
      }