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
2
respuestas

[Proyecto] Mi cara 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 Arturo Emiliano Ortega López
| 42.1k xp | 15 posts
Account Manager 
<meta charset="utf-8">

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

<script type="text/javascript">

    const canvas = document.querySelector("canvas");
    const pincel = canvas.getContext("2d");

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

    pincel.fillStyle = "black";

    pincel.fillRect(50,60,90,90);
    pincel.fillRect(210,60,90,90); // Ojos

    pincel.fillRect(140,150,70,100); // Nariz

    pincel.fillRect(100,190,40,110);
    pincel.fillRect(210,190,40,110); // Boca
</script>
2 respuestas
por Arturo Emiliano Ortega López
| 42.1k xp | 15 posts
Account Manager

Acabo de ver que el creeper lo ponen más o menos centrado en el canvas jaja corrección (+200 en el eje x y +50 en el eje y en todas las posiciones)

<meta charset="utf-8">

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

<script type="text/javascript">

    const canvas = document.querySelector("canvas");
    const pincel = canvas.getContext("2d");

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

    pincel.fillStyle = "black";

    pincel.fillRect(250,110,90,90);
    pincel.fillRect(410,110,90,90); // Ojos

    pincel.fillRect(340,200,70,100); // Nariz

    pincel.fillRect(300,240,40,110);
    pincel.fillRect(410,240,40,110); // Boca
</script>
por Cristhian Alexander Chulca Guatemal
| 98.1k xp | 1 posts

Si quitas el: type="text/javascript" de la línea 5 si funciona