Entrar ¿Aún no tienes acceso?
1
respuesta

[Proyecto] PROYECTO

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Moviendo elementos con animaciones simples y actividad Haz lo que hicimos en el aula

por MaríaFernandavegaPacheco
| 7.6k xp | 40 posts
<canvas width="600" height="400"></canvas>

<script>

    var pantalla=document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle="grey";
    pincel.fillRect(0,0,600,400);

function disenharCircunferencia(x,y,radio){ //no usar Ñ

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,5)



</script>
1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Maríafernandavegapacheco!

Por lo que puedo ver, este código es un ejemplo de cómo dibujar una circunferencia en un canvas y cómo moverla de un lado a otro. Es un buen comienzo para un proyecto.

Si estás buscando ideas para continuar con este proyecto, podrías intentar agregar más circunferencias y hacer que se muevan de manera diferente. También podrías agregar interacciones con el usuario, como hacer que las circunferencias cambien de color cuando se hace clic en ellas.

Recuerda que en la programación, la creatividad es clave. ¡Diviértete y experimenta con diferentes ideas!

¡Espero haber ayudado y buenos estudios!

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