¡Ya que va, que vuelva! Listo!!! | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Evento Click</title>
</head>

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

<script>
    let pantalla = document.querySelector("canvas");
    let pincel= pantalla.getContext("2d");

    pincel.fillStyle = "grey"
    pincel.fillRect(0,0,600,400);

    function diseniarCircunsferencia(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);
    }

    let x = 0;
    let y = 20;
    let direccion = true

     function actualizarPantalla(){
         if(direccion){
             if (x < 600){
                 direccion = true
                 x ++ ;
                 console.log(direccion)
             }else {
                 direccion = false
             }
         }else if(x > 0){
                 direccion = false
                 x = x -1 ;
                 console.log(direccion)
         }else {
             direccion = true;
         }


        limpiarPantalla();
        diseniarCircunsferencia(x,20,10);

    }

    setInterval(actualizarPantalla,10);


</script>