JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<DIV id=object1 
style="LEFT: -11px; POSITION: absolute; TOP: 0px; Z-INDEX: 2"></DIV>
<DIV id=earth style="LEFT: 0px; POSITION: absolute; TOP: 402px; Z-INDEX: 2">
<HR>
</DIV>
<DIV id=slide style="LEFT: 5px; POSITION: absolute; TOP: 9px; Z-INDEX: 2"></DIV>
<DIV id=slideA 
style="LEFT: 235px; POSITION: absolute; TOP: 20px; Z-INDEX: 2"><B>|</B></DIV>
<DIV id=bounce style="LEFT: 10px; POSITION: absolute; TOP: 40px; Z-INDEX: 2">
<FORM name=re><BR>rebounce the ball <INPUT onclick=reDrop() type=button value=GO>
<CENTER>
<p></p>
  </CENTER><BR></FORM></DIV>
<DIV id=spr style="LEFT: 2px; POSITION: absolute; TOP: 250px; Z-INDEX: 2">
<FORM name=s><BR>&nbsp;Set bounce value (default is 60%)<BR><BR>&nbsp;(note: even with 
    bounce at 100%,<BR>&nbsp;friction will slow it down) <BR><BR><INPUT onclick=setSpring(0) type=button value=" 0"> <INPUT onclick=setSpring(.30) type=button value=10> <INPUT onclick=setSpring(.60) type=button value=30> <INPUT onclick=setSpring(.75) type=button value="50 "> <INPUT onclick=setSpring(.90) type=button value=80> <INPUT onclick=setSpring(1.00) type=button value=100> <INPUT onclick=setSpring(1.05) type=button value=105> <INPUT onclick=setSpring(1.10) type=button value=110> 
</FORM></DIV>

CSS

#object1 {
    background:blue;
    width:10px;
    height:10px;
    border-radius:5px;
}

JavaScript

var xx
d=400
if (screen.height<500){
d=270
}
function checkScreen(){
if (document.layers) {document.spr.top=(d-150)
    document.earth.top=(d+2)}
if (document.all) {
spr.style.pixelTop=(d-150);
    earth.style.pixelTop=(d+2)}
}

spring=.8
function setSpring(xx){
spring=xx
}
posY=0


update=50 // update image every = 1/20 second
g=10 // acceleration of gravity ... actually 9.8
v=0  // velocity

function reDrop(){
clearTimeout(xx)

posY=0
if (document.layers) {document.object1.top=0
document.object1.left=(-11)}
else {object1.style.pixelTop=0;
object1.style.pixelLeft=-11
}
v=0
rollOn()
//setTimeout("drop()",1000)
}
var XX=0
var sp=1.5

function rollOn(){
XX+=sp
if (document.layers) {
document.object1.left=XX
if ((XX>100)&&XX<140) posY+=1.8,document.object1.top=posY,sp=3}
else {object1.style.pixelLeft=XX
if ((XX>100)&&XX<140) posY+=1.8,object1.style.pixelTop=posY,sp=3
}
if (XX<225) setTimeout("rollOn()",10)
else xx = setTimeout("drop()",200),XX=0,sp=1.5;
}

function drop(){
//T+=update
//t=T/100 // counting 1/10 of a second as one, otherwise divide by 1000 for real time
v+=g*update/500
posY+=v //total pixels travelled
//posY=d
if (posY>=d) {posY=d;}
if (document.layers) {document.object1.top=posY}
else {object1.style.pixelTop=posY;}

if (posY<d) xx = setTimeout("drop()",update)
else {
v=v*spring
if (v>1) xx = setTimeout("rise()",update)
    }
}

function rise(){

v-=g*update/500
posY-=v
if (document.layers)document.object1.top=posY
    else {
    object1.style.pixelTop=posY;
    }

if (v>0) xx = setTimeout("rise()",update)

else {
v=0//,posY=0
xx = setTimeout("drop()",update)
    }
}