Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] Dibujo de Ninja con Animacion

Hola, para reforzar lo aprendido en este curso me propuse como reto hacer un dibujo que tenga una pequeña animación. Intente dejar muy claras las secciones para que puedan modificarlo si desean. Cualquier consejo es bienvenido :D

<canvas width="900" height="900"></canvas>
<script>
    var canvas = document.querySelector("canvas");
    var pincel = canvas.getContext("2d");

    //Posiciones en X de los Ojos
    var ojoIzquierdo = 370;//330-370
    var ojoDerecho = 510;//470-510

    //Valores de movimiento
    var direccion = -1;//indica si el ojo se mueve hacia la derecha o izquierda
    var intervalo = 70;//representa el intervalo de tiempo    
    var velocidad = 2;//indica cuantos pixeles se desplaza al moverse

    //Asiganmos un color y dibujamos un cuadrado 
    function Cuadrado(color , xStart,yStart,width,height){
        pincel.fillStyle = color;
        pincel.fillRect(xStart,yStart,width,height);
    }

    //Contorno negro del ninja
    Cuadrado("black" , 300,0,300,300);//cabeza
    Cuadrado("black" , 150,300,600,600);//torso
    //Cabeza
    Cuadrado("silver" , 310,10,280,290);//cabeza
    Cuadrado("red" , 310,30,280,40);
    Cuadrado("bisque" , 310,90,280,80);
    //ojos
    Cuadrado("white" , 330,110,100,40);
    Cuadrado("black" , ojoIzquierdo,110,60,40);
    Cuadrado("white" , 470,110,100,40);
    Cuadrado("black" , ojoDerecho,110,60,40);
    //torso
    Cuadrado("grey" , 160,310,580,580);
    //brazos
    Cuadrado("black" , 300,490,15,400);
    Cuadrado("bisque" , 160,690,140,200);
    Cuadrado("black" , 585,490,15,400);
    Cuadrado("bisque" , 600,690,140,200);

    //Para la animacion debemos dibujar superponiendo los ojos para 
    //simular el movimiento
    function reDibujoOjos(){
        //ojos
        Cuadrado("white" , 330,110,100,40);
        Cuadrado("black" , ojoIzquierdo,110,60,40);
        Cuadrado("white" , 470,110,100,40);
        Cuadrado("black" , ojoDerecho,110,60,40);
    }
    //Mueve los valores donde se re-dibujaran los ojos
    function AnimacionOjos(){
        if(ojoDerecho < 471)direccion = 1;
        if(ojoDerecho >509)direccion = -1;
        ojoDerecho += (velocidad * direccion);
        ojoIzquierdo += (velocidad * direccion);
        reDibujoOjos();
    }
    setInterval(AnimacionOjos,intervalo);
</script>
1 respuesta

¡Hola Juan! ¡Deseo que estés bien!

¡Muchas Felicidades, tu código esta muy excelente, lo probe aqui y se ejecutó correctamente!

¡Gracias por compartir tu código con nosotros! Nos alegra mucho ver tu avance en las prácticas, éstas te darán un mayor fundamento en el aprendizaje. ¡Continua con ese mismo entusiasmo y no te desanimes!

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

En lo esencial, para agilizar el tiempo de respuesta que damos a ustedes, estamos priorizando el foro para postear las dudas como: errores, bugs y cualquier otro problema referente a los cursos.

En cambio, si deseas compartir tu código, ideas o actividades dispusimos en Discord un canal exclusivo para ese fin (⛓┇comparte-tu-codigo-logica) Allí, tus compañeros de estudios podrán ayudarte compartiendo conocimientos. ¡Esta interacción es muy importante para la participación de los alumnos y puede ayudarte a expandir tu red de contactos!

Te dejo éste link que muestra donde puedes compartir tus actividades

¡Te deseo mucho éxito en tus estudios! y recuerda que aquí estaremos para apoyarte!

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