Estoy intentando hacer una especie de buscaminas para que, cuando se pase el ratón sobre un div, cambie de color y elimine vidas hasta un total de 4 vidas.
Paso cada clase por el bucle for, le doy un porcentaje de probabilidad para el cambio de color y las vidas y parece que funciona correctamente pero me sale en consola que no está definida la variable trozo[i]
Llevo un tiempo dándole vueltas pero no consigo encontrar la solución. a ver si vosotros dais con la clave.
Muchas gracias!!
¿Sabéis por qué puede ser esto?
var trozo = document.getElementsByClassName("cuadro");
var parr = document.getElementById("par");
var vidas = 3;
for(i = 0; i <= trozo.length; i++){
trozo[i].addEventListener('mouseover', function(){
var num = Math.round(Math.random()*(99)+1);
if(num < 20){
this.style.backgroundColor = "red";
vidas--;
par.textContent = `Le queda un total de ${vidas} vidas`;
}else{
this.style.backgroundColor = "green";
}
if(vidas == 0){
alert("Se le han acabado las vidas");
location.reload();
}
});
}
#bloque{
margin: 2% auto;
}
.linea{
display: flex;
justify-content: center;
}
.cuadro{
width: 50px;
height: 50px;
margin: 0.2%;
display: flex;
background-color: grey;
border: solid 1px black;
border-radius: 2%;
}
h3{
text-align: center;
}
#par{
text-align: center;
font-size: 22px;
}
<h3>Debe pasar de arriba hacia abajo sin tocar más de 3 minas</h3>
<div id="bloque">
<div class="linea">
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
</div>
<div class="linea">
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
</div>
<div class="linea">
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
</div>
<div class="linea">
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
</div>
<div class="linea">
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
</div>
<div class="linea">
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
</div>
<div class="linea">
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
</div>
<div class="linea">
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
</div>
</div>
<p id="par">Tiene un total de 3 vidas</p>
Mil gracias