bumba

<!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>
Editor is loading...