1

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

1 respuesta 1

2

Te debe estar dando ese error en la última iteración del bucle porque le has puesto como condición de parada i <= tamaño. Creo que te desaparecerá ese error si lo modificas por:

for(i = 0; i < trozo.length; i++)

No obstante, el comportamiento del código no va a variar, solo te desaparecerá ese error, lo cual es una buena práctica quitarlo para evitar problemas en el futuro.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.