<!DOCTYPE html>
<html>
<head>
<style>
#bumba
{
width: 40px;
height: 40px;
background: red;
border-radius: 20px;
box-shadow: inset -10px -10px 10px rgba(0,0,0, .5);
position: absolute;
left: 100px;
top: 100px;
}
</style>
<script>
let x = 100;
let y = 100;
let atrumsy = 0;
let atrumsx = 10;
function cikls()
{
$("#bumba").css({top: y, left: x});
y += atrumsy;
if (y > window.innerHeight-40)
atrumsy = -atrumsy;
else
atrumsy++;
x += atrumsx;
if (x > window.innerWidth - 40)
atrumsx = -atrumsx;
if (x < 0)
atrumsx = -atrumsx;
}
setInterval(cikls, 30);
</script>
</head>
<body>
<div id='bumba'></div>
</body>
</html>
]