[Duda] Así como va que vuelva | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Hola Jofrannys, espero que estés bien.

Tienes que hacer al contrario que hiciste para que avanzara, decrementar el valor de x. Puedes crear una condición para determinar hasta que posición máxima va a avanzar antes de regresar.

Le dejo un ejemplo de como hacerlo:

<canvas width="600" height="400"> </canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");        
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400); 

    function disenharCircunferencia(x,y,radio){
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }    

    function limpiarPantalla(){

        pincel.clearRect(0,0,600,400);

    }

    var x = 0
    var avance = true;

    function actualizarPantalla(){

        if(x > 600){
            avance = false;
        }else if(x < 0){
            avance = true;
        }

        if(avance == true){
            limpiarPantalla();
            disenharCircunferencia(x,20,10);
            x++;
        } else {
            limpiarPantalla();
            disenharCircunferencia(x,20,10);
            x--;
        }
    }    

    setInterval(actualizarPantalla, 10);

</script>

Yo disminuí el tiempo de actualización de la pantalla para que la "bola" vaya y vuelva más rapido.

Cualquier duda estoy aqui para ayudarte.

¡Saludos!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios