Skip to main content
2 de 2
se añadieron 56 caracteres en el cuerpo
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

error de indice en consola al pasar evento por clases

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