JSFiddle - React, Tailwind, and code Playground

by Anton Kolesnikov

HTML

<div id="ball">
</div>
<div id="block">
</div>

CSS

body {
  margin: 0;
}
#ball {
  top: 300px;
  left: 100px;
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: red;
}
#block {
  width: 300px;
  height: 50px;
  position: absolute;
  top: 400px;
  background-color: green;
}

JavaScript

var ball = document.getElementById('ball');
var g = 0.01; // гравитация
var v = 2; // начальная скорость
var h = ball.getBoundingClientRect().top; // начальная высота

function jump() {
  
	var timer = setInterval(function() {
  	console.log(timer);
  	if (h > 300) {
    	clearInterval(timer);
      h = 300; // сброс высоты
      v = 2; // сброс скорости
    }
   console.log(h);
    h -= v;
    v -= g;
    ball.style.top = h +'px';
    
  }, 10)
}

ball.addEventListener('click', jump, false);