JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Area">
  <div id="Point"></div>
</div>

<input type="text" id="Angle" value="45" />
<input type="text" id="Speed" value="100" />
<input type="button" id="Go" value="GO" />

CSS

#Angle {
    width:30px; 
    position:absolute; 
    top:110px; 
    left:110px;
}
#Speed {
    width:30px; 
    position:absolute; 
    top:110px; 
    left:150px;
}
#Go {
    width:30px; 
    position:absolute; 
    top:110px; 
    left:190px;
}
#Area {
    background-color:#FFF; 
    position:absolute; 
    top:100px; 
    left:100px; 
    right:100px; 
    bottom:100px;
    border: 2px solid red;
}
#Point {
    position:absolute;
    left:0;
    bottom:0;
    width:5px;
    height:5px;
    background-color:#000;
    border-radius:3px;
}

JavaScript

$(function() {
    function Go() {
  
        var Angle  = parseFloat($("#Angle").val()) * (Math.PI / 180); // Угол в радианах
        var Speed  = parseFloat($("#Speed").val()); // Скорость
        var G      = 9.81; // Свободное падение
        var x      = 0;
        var y      = 0;
        var i      = 0;
        
        var Point  = $("#Point");
        
        var tick = 100, timeTick = tick / 1000;
        
        var vX = Speed * Math.cos(Angle), 
            vY = Speed * Math.sin(Angle);
        
        var dX = vX * timeTick, dVy = G * timeTick;
        
        var Move = function() {
            x += dX;
            vY -= dVy;
            
            y += vY * timeTick;
            
            Point.stop().animate({
                'left'   : x,
                'bottom' : y
            }, tick - 1);
            
            if (i++ > 0 && y <= 0) {
                clearInterval(interval);
                return;
            }
        };
        
        var interval = setInterval(Move, tick);
        
    }
    
    $('#Go').click(Go);
});