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"/> Declaré mis variables globales, seguidas de una función para mover la pelota, luego seguidas de un setInterval . Sin embargo, parece que no puedo encontrar la forma correcta de revertir la bola que se mueve continuamente a la derecha de mi pantalla hasta que ya no está visible. ¿Se trata de una especie de método inverso o de condiciones de establecimiento?
En la solución a continuación, la variable de velocity se usa para cambiar la velocidad de movimiento. El método updateDirection() se utiliza para cambiar la nueva información de dirección comprobando el valor de positionX .
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"/>