07 Haz lo que hicimos en el aula

¡Hola Irvin!

Según lo que puedo ver en el código que compartiste, estás dibujando una circunferencia en la pantalla y moviéndola horizontalmente. Si lo que quieres es que la circunferencia se mueva en diferentes direcciones, puedes agregar una variable para la posición vertical (y) y luego modificarla en la función actualizarPantalla. Por ejemplo, podrías agregar una variable llamada "direccionY" y luego sumarla o restarla a la posición vertical de la circunferencia en cada iteración.

Aquí te muestro un ejemplo de cómo podrías 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);

var x = 0;
var y = 20; // Agregamos la variable y

// Agregamos la variable direccionY para controlar la dirección vertical
var direccionY = 1;

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);
}

function actualizarPantalla() {
    limpiarPantalla();
    disenharCircunferencia(x,y,10); // Usamos la variable y para la posición vertical
    x ++;
    y += direccionY; // Modificamos la posición vertical según la dirección
    if(x >= 600){
        x = 0;
    }
    if(y >= 400 || y <= 0){ // Cambiamos la dirección vertical si llegamos al borde superior o inferior
        direccionY *= -1;
    }
}

setInterval(actualizarPantalla,5);   
</script>

Espero que esto te ayude a lograr lo que estás buscando. ¡Buenos estudios!