Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Ya que va, que vuelva!!

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Moviendo elementos con animaciones simples y actividad ¡Ya que va, que vuelva!

por Walter Rodolfo Liendo
| 108.3k xp | 20 posts
Administrador 
<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 sentido = 1;

    function actualizarPantalla(){

        limpiarPantalla();
        if(x > 600){
            sentido = -1;
        }else if(x < 0){
            sentido = 1;
        }

        disenharCircunferencia(x,20,10);
        x = x + sentido;
    }

    setInterval(actualizarPantalla,10);

</script>
1 respuesta
solución!
por Mariana Spinola Federico
| 455.2k xp | 1548 posts
Alura Scuba Team Instructora Front-End

¡Hola Walter!

El código que compartiste es un ejemplo de animación en JavaScript utilizando el elemento canvas de HTML. Lo que hace es dibujar una circunferencia que se mueve de izquierda a derecha y viceversa.

La función disenharCircunferencia dibuja la circunferencia en una posición específica, mientras que la función limpiarPantalla se encarga de borrar todo lo que se ha dibujado anteriormente en el canvas.

La variable x representa la posición horizontal de la circunferencia y la variable sentido indica la dirección en la que se está moviendo. Si x llega al límite del canvas, se invierte la dirección para que la circunferencia se mueva en sentido contrario.

Por último, la función setInterval se encarga de llamar a la función actualizarPantalla cada 10 milisegundos para que la circunferencia se mueva de manera fluida.

Gracias por tu contribución y felicitaciones por tu aprendizaje. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Para no dejar de compartir los códigos, actividades y ejercicios que realizas, creamos un canal en Discord (#compartatucodigo) donde puedes compartirlos, dar y sugerir mejoras con el resto de tus compañeros.

Un saludo.

Espero que esta explicación te haya sido útil. ¡Buenos estudios!

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