JSFiddle - React, Tailwind, and code Playground

by Rui Leite

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;
    $(".cair").animate({
        top: fim + "px",
    }, {
        duration: 6000,
        start: function () {
            inicio = window.getComputedStyle(this).top.replace('px', '');

        },
        progress: function (a, p, r) {
            var valorAtual = p * (fim - inicio);
            $(document).keyup(function(e) {
                if (e.which == 51 && Math.round(valorAtual) > 0) { 
               $('.cair').remove();
                    acertos++;
                    alert(acertos);
                }})
        },
        
            "complete": function () {
            $('.cair').remove();
        },
 })});