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

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How do you reverse the direction of a ball if continuously going in one direction? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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"/>
We are here to answer your question about How do you reverse the direction of a ball if continuously going in one direction? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji