How do you reverse the direction of a ball if continuously going in one direction?

Question

var velocity = 100;
var positionX = 0;
var ball = document.getElementById('ball');

function moveBall() {
  var Xmin = 0;
  var Xmax = 300;
  
  positionX = positionX + velocity;
  ball.style.left = positionX + 'px';
}

setInterval(moveBall, 100);

img {
  position: absolute;
}

<img id="ball" width="150" height="150" src="https://tr.seaicons.com/wp-content/uploads/2016/11/Volleyball-Ball-icon.png"/>

I have declared my global variables, followed by a function to move the ball, then followed by a setInterval. However, I can't seem to figure the right way to reverse the ball that continuously moves to the right of my screen until no longer visible. Is it a matter of a type of reverse method or setting up conditions?

Answer 1

In the solution below the velocity variable is used to change the moving speed. The updateDirection() method is used to change the new direction information by checking the positionX value.

var ball = document.getElementById('ball');

/* This variable is used to change the movement speed. */
const velocity = 50;
/* This variable is used to change the amount of movement per unit time. */
const step = 10;
/* This variable stores the current or target position of the <img> element. */
var positionX = 0;
/* This variable stores the minimum position value. */
const xMin = 0;
/* This variable stores the maximum  position value. */
const xMax = 300;
/* true: right move, false: left move */
var direction = true; 

/* This method is used to change the direction of movement. */
function updateDirection() {
  if(positionX == xMax)
    direction = false;
  else if(positionX == xMin)
    direction = true;
}

function moveBall() {
  updateDirection();
  
  if(direction)
    positionX += step;
  else
    positionX -= step;
    
  ball.style.left = `${positionX}px`;
  
  console.clear();
  console.log(`Direction: ${direction ? "right" : "left"} Position: ${positionX} `);
}

/* Update the velocity value to change the movement speed. */
setInterval(moveBall, velocity);

img {
  position: absolute;
}

<img id="ball" width="150" height="150" src="https://tr.seaicons.com/wp-content/uploads/2016/11/Volleyball-Ball-icon.png"/>