1
respuesta

[Sugerencia] ¡Ya que va, que vuelva! - Esta fue mi solución!

Hola amigos!!!

Esta fue mi solucion de esta practica!!!

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    var x = 20;
    devolver = true;

    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);
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0,0,600,400);
    }

    function actualizarPantalla() {
        if (x < 580 && devolver) {
            limpiarPantalla();
            disenharCircunferencia(x,20,10);
            x++;
        }
        else {
            devolver = false;
        }

        if (x > 20 && devolver == false) {
            limpiarPantalla();
            disenharCircunferencia(x,20,10);
            x--;
        }
        else {
            devolver = true;
        }

    }

    setInterval(actualizarPantalla,5);

</script>
1 respuesta

¡Hola Gustavo!

Gracias por compartir tu solución con nosotros. Parece que has creado una animación que mueve una circunferencia de un lado a otro de la pantalla. Me alegra ver que estás practicando con el canvas y el contexto 2D.

Solo quería sugerirte que podrías agregar un poco de interacción con el usuario. Por ejemplo, podrías hacer que la circunferencia cambie de dirección cuando el usuario haga clic en ella.

¡Espero que esta sugerencia te sea útil! Si tienes alguna otra duda, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!

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