JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<!--Pressionar a tecla 5 a qualquer momento antes de terminar a animação!-->
<div class="cair"></div>

CSS

.cair {
    position: absolute;
    top: 0px;
    padding: 30px;
    height: 50px;
    width: 50px;
    background-color: #ccf;
}

JavaScript

$(function () {
    var inicio;
    var fim = 385;
    var acertos = 0;
    var valorAtual;
    
    function testarAcerto(e) {
        if (e.which == 51 && Math.round(valorAtual) > 0) {
            $('.cair').remove();
            acertos++;
            alert(acertos);
            $(document).unbind("keyup");
        }
    }
    
    $(".cair").animate({
        top: fim + "px",
    }, {
        duration: 6000,
        start: function () {
            inicio = window.getComputedStyle(this).top.replace('px', '');
            $(document).bind("keyup", testarAcerto);
        },
        progress: function (a, p, r) {
            valorAtual = p * (fim - inicio);
        },

        "complete": function () {
            $('.cair').remove();
            $(document).unbind("keyup");
        },
    })
});