https://jsfiddle.net/h0avkn8p/ es mi código completo
Cuando juegues el juego dos veces, verás que la posición correcta del cuadrado del último juego permanece en blanco, ¿alguien sabe dónde está el problema? Creo que viene de esta parte de mi código.
function genSquareColors(){ if(arr.length > 0){ arr.splice(0, arr.length); } for(let i = 0; i < 5; i++){ arr.push(genWrong()); // generates five incorrect squares } arr.push(answer); scramble(arr); console.log(arr); return arr; } function setColor(){ for(let i = 0; i < squares.length; i++){ squares[i].style.backgroundColor = arr[i]; } } function colorSquares(){ for(let i = 0; i < squares.length; i++){ squares[i].addEventListener("click", function(){ var clicked = this.style.backgroundColor; if(clicked === answer){ alert("You won!"); reset(); this.style.backgroundColor = setColor(); } else { this.style.backgroundColor = "#FFFFFF"; tries--; } }); } }Veo eso aquí:
function colorSquares(){ for(let i = 0; i < squares.length; i++){ squares[i].addEventListener("click", function(){Estás adjuntando un nuevo detector de eventos a cada cuadrado cada vez que se ejecuta el juego . Entonces, a partir del segundo juego, un clic producirá dos resultados para cada oyente. En el tercer juego, habrá tres resultados, etc. Por lo tanto, un clic puede resultar en un cuadrado "ganador" y de color blanco.
Guarde una referencia a cada oyente en una variable persistente, luego llame a removeEventListener con cada uno de ellos, o use .onclick en su lugar, para que solo se mantenga la última asignación.
function colorSquares(){ for(let i = 0; i < squares.length; i++){ squares[i].onclick = function(){ var clicked = this.style.backgroundColor; if(clicked === answer){ alert("You won!"); reset(); this.style.backgroundColor = setColor(); } else { this.style.backgroundColor = "#FFFFFF"; tries--; } }; } }Lo que sucede aquí es que su detector de eventos se crea en los mismos elementos una y otra vez y nunca se limpia. Si consola.cierra sesión en el evento IE.
for(let i = 0; i < squares.length; i++){ squares[i].addEventListener("click", function(){ var clicked = this.style.backgroundColor; console.log("oh no!") if(clicked === answer){ alert("You won!"); reset(); this.style.backgroundColor = setColor(); } else { this.style.backgroundColor = "#FFFFFF"; tries--; } }); } }Notará que el evento de clic se llama muchas veces.
La solución sería almacenar el evento una vez que se aplica y luego, si el evento está configurado, restablecerlo. ES DECIR.
https://jsfiddle.net/CynderRnAsh/aukbnsp1/8/
O aplique el evento solo una vez, es decir. https://jsfiddle.net/CynderRnAsh/aukbnsp1/11/