How can i create a ball that bounce when hitting the borders without using canvas in javascript?

Question

Hi there so i'm trying to create a bouncing ball using javascript and i need some help finishing it without using any complicated code this is the code that i have done:

https://codepen.io/messili-islem/pen/XWrjOja

i appreciate your help guys Thanks

var ball = document.getElementById('ball')
var ballObj = { x: 0, y: 0, dx: 1, dy: 1, size: 100 }
var x = 0
var y = 0

function movement () {
  var id = setInterval(moveball, 1)

  function moveball () {

    function downleft () {
      x++
      y++
      ball.style.top = x + 'px'
      ball.style.left = y + 'px'
    }

    function upright () {

      x--
      y--
      ball.style.top = x + 'px'
      ball.style.left = y + 'px'

    }

    function downright () {
      x++
      y--
      ball.style.top = x + 'px'
      ball.style.left = y + 'px'
    }

    function upleft () {
      x--
      y++
      ball.style.top = x + 'px'
      ball.style.left = y + 'px'
    }

    downleft()

    if (x == 400) {
      clearInterval(id)
      var id2 = setInterval(upleft, 1)
    }
  }
}

Answer 1

That's a starter code

I use requestAnimationFrame instead of setInterval for time based calculations
I use transform style instead of top and left for better performance
I encapsulated all the code into an anonymous function to prevent global namespace pollution
I used EventListener instead of onclick on button

"use strict";

// This is a self-invoking anonymous function
// It's used to encapsulate the inner variables 
// and functions in order for the global namespace 
// to not be polluted and to avoid naming conflicts
// See: https://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript
// See: https://idiallo.com/javascript/self-invoking-anonymous-function
(function() {
  
  var ball = document.getElementById("ball");
  var container = document.getElementById("container");
  var btn = document.getElementById("btn");
  // some factor to scale the speed of the ball
  var factor = 1 / 5;
  var timeOld, timeElapsed;
  // the current x position of the ball
  var x = 0;
  var y = 0;
  var step = 1;
  // the direction in the x dimension (1 or -1)
  var dx = step;
  var dy = step;
  var width = ball.offsetWidth;
  var height = ball.offsetHeight;
  var cH = container.offsetHeight;
  var cW = container.offsetWidth;
  
  function movement() {
    // use requestAnimationFrame in favor of setInterval/setTimeout
    // See: https://css-tricks.com/using-requestanimationframe/
    requestAnimationFrame(moveball);

    // check the balls position and set the direction if out of bounds
    function checkBall() {
      if (x + width >= cW) dx = -step;
      if (x <= 0) dx = step;
      if (y + height >= cH) dy = -step;
      if (y <= 0) dy = step;
    }

    // move the ball by (dx,dy)
    function moveball(timestamp) {
      // measure the time elapsed since 
      // last call to moveball function
      if (!timeOld) timeOld = timestamp;
      timeElapsed = timestamp - timeOld;
      timeOld = timestamp;

      // calculate ball's position based on 
      // movement's direction and time elapsed
      x += dx * timeElapsed * factor;
      y += dy * timeElapsed * factor;

      // use CSS transform instead of top and left
      // for performance reasons
      // See: https://www.keycdn.com/blog/animation-performance#there-are-three-main-types-of-css-properties
      ball.style.transform = "translate(" + x + "px, " + y + "px)";

      checkBall();
      // call requestAnimationFrame again
      // like you would do with
      // setTimeout
      requestAnimationFrame(moveball);
    }
  }
  
  btn.addEventListener('click', movement)
})();

#container {
  width: 450px;
  height: 300px;
  position: relative;
  border: 1px solid black;
  margin: auto;
}
#ball {
  border-radius: 100px;
  width: 100px;
  height: 100px;
  position: absolute;
  background-image: radial-gradient(farthest-side at 30px 30px, red, black 125%);
}

<p><button id="btn" >movement()</button></p>
<div id="container">
  <div id="ball"></div>
</div>