JSFiddle - React, Tailwind, and code Playground
HTML
<div class="vumi">
<div class="kaman">
<div class="trigger"></div>
</div>
<div class="gola"></div>
</div>
<button class="button fire">Fire!</button>
<button class="button refresh">Reset</button>
CSS
* {margin:0px;padding:0px;}
html {
width:100%;
height:100%;
overflow:hidden;
}
body {
background:skyblue;
}
.vumi {
width:100%;
height:1px;
background:#ff5500;
position:absolute;
left:0px;
bottom:0px;
}
.kaman {
position:absolute;
background:#5eb900;
}
.gola {
background:crimson;
height:25px;
width:25px;
border-radius:12.5px;
position:absolute;
left:60px;
bottom:55px;
}
.trigger {
background:darkgreen;
height:10px;
width:32px;
position:absolute;
bottom:7.5px;
left:-22px;
border-radius:5px;
}
.button {
border:1px solid white;
width:100px;
height:30px;
font-size:20px;
background:#019be1;
color:white;
cursor:pointer;
font-family:Times;
}
.button:hover {
background:white;
color:#019be1;
}
.refresh {
position:absolute;
right:0px;
top:0px;
}
JavaScript
//Install the Game
{
//Install the Constants
Ad=45;
A=(Math.PI*Ad)/180; //Convert in Radian Unit
var Ard;
var Vo=60;
g=-9.8;
//Install the Gola
gola=$(".gola");
dX=parseInt(gola.css("left"));
dY=parseInt(gola.css("bottom"));
//Set the Kaman
kaman=$(".kaman");
kWidth=100;
kHeight=25;
kBottom=((kWidth*Math.sin(A))+(kHeight*Math.cos(A))-kHeight)/2;
kTransform="rotate(-"+Ad+"deg)";
kaman.css({"width":kWidth,"height":kHeight,"bottom":kBottom,"transform":kTransform});
}
function fire(){
if ($(".trigger").position().left<(30)){
$(".trigger").animate({left:"40px"},150,"linear",function(){run();});
}
}
function run(t){
if (!Ard){Ar=A;} else {Ard=Ard;Ar=(Math.PI*Ard)/180;}
Vxo=Vo*Math.cos(Ar);
Vyo=Vo*Math.sin(Ar);
if (!t){t=0.1;}
VT=Vxo*t;
Sx=dX+VT;
Sy=dY+((Vyo*t)+(0.5*g*(t*t)));
gola.animate({left:Sx,bottom:Sy},1,"linear",function(){if (Sy<=2){gola.stop();} else {run(t+.1);}});
}
function reset(){
gola.css({"left":"60px","bottom":"55px"});
$(".trigger").css({"left":"-22px"});
}
$(document).ready(function(){
$(".fire").click(function(){
fire();
});
$(".refresh").click(function(){
reset();
});
});