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