Estoy haciendo un simon(juego de memoria) cuando el nivel alcanza el ultimo nivel y se te anuncia que ganaste el juego, el valor level vuelve a 0 los divs no deberian tener event listeners y tampoco deberia reiniciarse la secuencia sola, ¿alguna idea para convertir eliminar y aregar eventos click en ciclos for?
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 loser = document.getElementById('loser')
const winner = document.getElementById('winner')
let level = 0
const ULTIMO_NIVEL = 1
let subnivel = 0
const colores = {
verde,
amarillo,
azul,
rojo,
blanco
}
let secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random() * 5))
function hideButton(){
boton.classList.add('hide')
iluminarSecuencia()
}
function iluminarSecuencia() {
for (let i = 0; i <= level; i++) {
const color = transformarNumeroAColor(secuencia[i])
setTimeout(() => iluminarColor(color), 1000 * i)
console.log(color)
}
agregarEventosClick()
}
function iluminarColor(color) {
colores[color].classList.add('light')
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'
}
}
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
}
}
function agregarEventosClick() {
colores.verde.addEventListener('click', this.elegirColor)
colores.amarillo.addEventListener('click', this.elegirColor)
colores.rojo.addEventListener('click', this.elegirColor)
colores.azul.addEventListener('click', this.elegirColor)
colores.blanco.addEventListener('click', this.elegirColor)
}
function eliminarEventosClick() {
colores.verde.removeEventListener('click', this.elegirColor)
colores.amarillo.removeEventListener('click', this.elegirColor)
colores.rojo.removeEventListener('click', this.elegirColor)
colores.azul.removeEventListener('click', this.elegirColor)
colores.blanco.removeEventListener('click', this.elegirColor)
}
function elegirColor(ev) {
const nombreColor = ev.target.dataset.color
const numeroColor = transformarColorANumero(nombreColor)
iluminarColor(nombreColor)
if (numeroColor === secuencia[subnivel]) {
subnivel++
if (subnivel > level) {
eliminarEventosClick()
level++
subnivel=0
setTimeout(iluminarSecuencia, 1500)
}
if (level === (ULTIMO_NIVEL + 1)) {
ganoJuego()
}
}
else {
perdioJuego()
}
}
function ganoJuego(){
eliminarEventosClick()
winner.classList.remove('hide')
setTimeout(start, 1000)
}
function start(){
winner.classList.add('hide')
boton.classList.remove('hide')
level=0
}
function perdioJuego(){
eliminarEventosClick()
loser.classList.remove('hide')
setTimeout(startos, 1000)
}
function startos(){
loser.classList.add('hide')
boton.classList.remove('hide')
level=0
}
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);
}
.box{
box-sizing: border-box;
height: 50%;
width: 50%;
border: 1px solid black ;
display: flex;
margin: 0;
border-radius: 5%;
}
.uno{
background-color: rgba(0, 0, 255, 0.767);
position: relative;
}
.dos{
background-color: rgb(49, 122, 55);
}
.tres{
background-color: rgb(213, 224, 46) ;
position: relative;
}
.cuatro{
background-color: rgb(194, 13, 13);
}
.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% ;
}
.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(198, 253, 201);
}
.petatre.dark{
background-color: rgb(67, 204, 74);
}
.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: 1;
font-size: 10px;
overflow: hidden;
text-align: right;
}
.boton.hide{
display: none;
}
.boton:hover{
border: 1px solid rgb(10, 10, 10);
text-decoration: underline;
font-style: italic;
}
.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;
}
<body>
<div class="gameboard">
<div class="box uno light" >
<div id='rojo' class="petaun" data-color="rojo" ></div>
</div>
<div class="box dos light">
<div id="amarillo" class="petado" data-color="amarillo"></div>
</div>
<div class="box tres light" >
<div id="verde" class="petatre" data-color="verde"></div>
</div>
<div class="box cuatro light" >
<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()">Empezar!</button>
<div id="winner" class="resultado hide"><p>Ganaste! :)</p></div>
<div id="loser" class="resultados hide"><p> :( Perdiste!</p></div>
</div>