1
respuesta

Duda con mi dinosaurio.

Estimadores instructores, compañeros/as:

Ya tengo mi dinosaurio que abre y cierra la boca, el unico problema que no logro que los dientes vayan a la misma altura de la boca, espero que alguien tenga alguna idea o comparte la solución, se los agradezco.

Muestro las capturas de pantallas, asi como el codigo.

Asi es como inicia el dinosarurio Dinosaurio by pedromunozlopezAsi es como termina Dinosaurio by pedromunozlopez

Codigo fuente del programa:

<!-- dinosaurio moviendo boca by pedromunozlopez -->

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

//cuerpo del dinosaurio
function cuerpo (x,y,radio){

    pincel.fillStyle = 'green'; 
    pincel.beginPath();
    pincel.arc(x,y,radio, 90, 2 * Math.PI); 
    pincel.fill();
}

//cara del dinosaurio
function cara (x,y,ancho, alto){
    pincel.fillStyle = 'green'; 
    pincel.fillRect(x,y,ancho, alto);  
}

//cara + bordes de ojos del dinosaurio
function carabordeojos(x,y,radio){
    pincel.fillStyle = 'green'; 
    pincel.beginPath();
    pincel.arc(x,y,radio,0, 2 * Math.PI); 
    pincel.fill();
}

//borde de ojos del dinosaurio
function bordeojos(x,y,radio){
    pincel.fillStyle = 'darkgreen'; 
    pincel.beginPath();
    pincel.arc(x,y,radio,0, 2 * Math.PI); 
    pincel.fill();
}

//ojo del dinosaurio
function ojos (x,y,radio){
    pincel.fillStyle = 'black'; 
    pincel.beginPath();
    pincel.arc(x,y,radio, 0, 2 * Math.PI); 
    pincel.fill();
}

//iris del dinosaurio
function iris (a,b,c,d,e,f){
    pincel.fillStyle='yellow'; 
    pincel.beginPath();
    pincel.moveTo(a,b);
    pincel.lineTo(c,d);
    pincel.lineTo(e,f);
    pincel.fill();
}

//boca del dinosaurio
function boca (a,b,c,d,e,f){
    pincel.fillStyle='red'; 
    pincel.beginPath();
    pincel.moveTo(a,b);
    pincel.lineTo(c,d);
    pincel.lineTo(e,f);
    pincel.fill();
}


    var espaciosdientesX = 15; 
    var espaciosdientesY = 2;
    var cantidaddedientes=11;
    var iniciodientes = 30;

//Dientes superiores del dinosaurio
function dientessuperiores (a,b,c,d,e,f){

 //para incrementar los dientes 
    for (var contardientesS = 0; contardientesS <= cantidaddedientes; contardientesS++) {

        var dientesX = contardientesS * espaciosdientesX;
        var dientesY = contardientesS * espaciosdientesY;

 pincel.fillStyle='black'; 
    pincel.beginPath();
    pincel.moveTo((a - iniciodientes) + dientesX, b - dientesY);
    pincel.lineTo((c - iniciodientes) + dientesX, d - dientesY);
    pincel.lineTo((e - iniciodientes) + dientesX, f - dientesY);
    pincel.fill();
    }
}

//Dientes inferiores del dinosaurio
function dientesinferiores(a,b,c,d,e,f){

 //para incrementar los dientes
    for (var contardientesI = 0; contardientesI <= cantidaddedientes; contardientesI++) {

        var dientesX = contardientesI * espaciosdientesX;
        var dientesY = contardientesI * espaciosdientesY;

    pincel.fillStyle='black'; 
    pincel.beginPath();
    pincel.moveTo((a - iniciodientes) + dientesX, b + dientesY);
    pincel.lineTo((c - iniciodientes) + dientesX, d + dientesY);
    pincel.lineTo((e - iniciodientes) + dientesX, f + dientesY);
    pincel.fill();
    }
}

function limpiarPantalla(){
    pincel.clearRect(0,0,600,400);
}
    var y = 5;
    var sentido = 1;

    function actualizarPantalla(){
        limpiarPantalla();
        if(y > 55){
            sentido = -1;

        }
        else if(y < 0){
            sentido = 1;
    }

    //Se mantiene quieto
       cuerpo(5,245,200); 
       cara(50, 50, 400 ,200);
       carabordeojos(150, 60, 50);
       bordeojos(150, 50, 30);
       ojos(150,50,15);

    // se mueven dientes y boca
    ojos(150,50,15+(0.10*y)); 
    iris(140,55-(0.25*y),150,55+(0.15*y),160,50-(0.15*y)); 
    boca(450,115-y,450,190+y,200,152);
    //0.10, 0.25, 0.15 para reducir tamaño del ojo y del iris

     dientessuperiores(300,140-y,310,160-y,310,140-y);
     dientesinferiores(295,165+y,300,145+y,305,165+y);

    y = y + sentido;

    }

    setInterval(actualizarPantalla,30);

</script>

Saludos Virtuales Pedro Francisco Muñoz López

1 respuesta

Hola , espero que estés muy bien.

Estamos muy contentos con tu aprendizaje ,esto añade mucho más a tus estudios durante el curso. Gracias por compartir tu código con nosotros.

Este archivo te puede ayudar con tu duda

https://developer.mozilla.org/pt-BR/docs/Web/API/Canvas_API
Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios