SOURCE

window.onload = function() {
  var ball = document.querySelector(".ball");
  var speedX = 2,speedY = 2;
  setInterval(function() {
    var left = ball.offsetLeft;
    var top = ball.offsetTop;
  
    left += speedX;
    top += speedY;
  
    if (left >= document.body.offsetWidth - ball.offsetWidth || left <= 0) {
      speedX *= -1;
    }
    if (top >= document.body.offsetHeight - ball.offsetHeight || top <= 0) {
      speedY *= -1;
    }
    ball.style.left = left + "px";
    ball.style.top = top + "px";
  }, 16);
}

<div class="ball"></div>

* {
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
}
.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  position: absolute;
  left: 100px;
  top: 100px;
}