2
respuestas

*****Cabeza de Creeper*****

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Diseñando gráficos con Canvas y actividad La cara de Creeper

por Harnel Peña Peñaloza
| 41.7k xp | 17 posts
<canvas width="600" height="400">

</canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");


    //Cabeza
    pincel.fillStyle = "darkgreen";
    pincel.fillRect(200,0,350,300);

    //Ojos
    pincel.fillStyle = "black";
    pincel.fillRect(250,50,90,90);

    pincel.fillStyle = "black";
    pincel.fillRect(400,50,90,90);

    //Nariz
    pincel.fillStyle = "black";
    pincel.fillRect(335,140,70,100);

    //boca
    pincel.fillStyle = "black";
    pincel.fillRect(398,190,40,110);

    pincel.fillStyle = "black";
    pincel.fillRect(300,190,40,110);


</script>
2 respuestas
por Ingrid Silva
| 1460.2k xp | 4637 posts
Instructor

Gracias por compartir tu código con nosotros, he probado aquí y el resultado ha sido muy bueno.

por gatti pablo alejandro
| 477.7k xp | 338 posts

Hola comparto mi creeper


<canvas width="600" height="400"> </canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");


    pincel.fillStyle = "darkgreen";   
    pincel.fillRect(125,50,350,300); 


    pincel.fillStyle = "black";   

    pincel.fillRect(175,120,90,90);    // ojo izquierdo
    pincel.fillRect(335,120,90,90);    // ojo derecho

    pincel.fillRect(225,250,40,100);   // parte de boca
    pincel.fillRect(265,210,70,100);   // nariz
    pincel.fillRect(335,250,40,100);   // parte de boca


</script>