Skip to main content
se añadieron 56 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>

    #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;
    }


</style>
<title>Document</title>
</head>
<body>
<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>

<script>
    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();
                }
            });   
        }
</script>
</body>
</html>

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>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>

    #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;
    }


</style>
<title>Document</title>
</head>
<body>
<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>

<script>
    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();
                }
            });   
        }
</script>
</body>
</html>

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>

Origen Enlace

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?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>

    #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;
    }


</style>
<title>Document</title>
</head>
<body>
<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>

<script>
    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();
                }
            });   
        }
</script>
</body>
</html>

Mil gracias