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?

    

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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();
          }
        });   
      }

<!-- language: lang-css -->


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


<!-- language: lang-html -->

    <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>



<!-- end snippet -->

Mil gracias