Estoy añadiendo y retirando clases a 5 divs aleatoriamente en una ronda de 10 para que parezca que se iluminen: los colores prenden y apagan adecuadamente, pero cuando se termina la secuencia se me abre el debugger y se detiene en colores[color].classList.add('light')
, como si al final tratara de añadirle la clase que ilumina a un div que no encuentra, ¿alguna idea?
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 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 <= 10; i++) {
const color = transformarNumeroAColor(secuencia[i])
setTimeout(() => iluminarColor(color), 1000 * i)
console.log(color)
}
}
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'
}
}
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;
}
<div class="gameboard">
<div class="box uno light">
<div id='rojo' class="petaun" data-color="red"></div>
</div>
<div class="box dos light">
<div id="amarillo" class="petado" data-color="yallow"></div>
</div>
<div class="box tres light">
<div id="verde" class="petatre" data-color="green"></div>
</div>
<div class="box cuatro light">
<div id="azul" class="petacua" data-color="blue"></div>
</div>
<div id="blanco" class="polen" data-color="polen"></div>
<button id="btnEmpezar" class="boton" onclick="hideButton()">Empezar!</button>
</div>
for
estás iterando 10 veces. Ahí está el problema.i
es mayor que 4,transformarNumeroAColor
devolveráundefined
. Podrías hacernumero % 5
para que siempre devuelva un número entre 0 y 4.