Buenas, les paso lo que se me ocurrió hacer. La del instructor claramente mejor xD ``` <body> <canvas width="600" height="400"></canvas> <script><b

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

Buenas, les paso lo que se me ocurrió hacer. La del instructor claramente mejor xD

<body>

    <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, color) {
            pincel.fillStyle = color;
            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 aumentar = true;

        function actualizarPantalla() {

            if (x == 0) {
                aumentar = true;
            } else if (x == 600) {
                aumentar = false;
            }

            if (aumentar) {
                limpiarPantalla();
                disenharCircunferencia(x, 20, 10, "blue");
                x++;
            } else {
                limpiarPantalla();
                disenharCircunferencia(x, 20, 10, "red");
                x--;

            }

        }

        setInterval(actualizarPantalla, 5);

    </script>


</body>