1
respuesta

Comparto mi solución a Creeper


<meta charset="utf-8">

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


<Script>

var pantalla = document.querySelector("canvas");   // con esto conecto la etiqueta canvas

var pincel = pantalla.getContext("2d");   // pincel donde le pasamos lo que tiene la pantalla y en 2 dimensiones.

pincel.fillStyle = "lightgrey";

pincel.fillRect (0,0,600,400);  // esto es una función del objeto pincel (en programación orientada a objetos conocida como método) por eso luego van parentesis.   Es una función (método) del objeto pincel que en nuestro código la usábamos para diseñar (dibujar) las figuras.

pincel.fillStyle = "darkgreen";
pincel.fillRect (120,45,350,300);     // cabeza

pincel.fillStyle = "black";     
pincel.fillRect (170,100,90,90);  // ojo izq

pincel.fillRect (330,100,90,90);  // ojo dcho

pincel.fillRect (260,190,70,100);  // nariz

pincel.fillRect (220,235,40,110);  // boca izq

pincel.fillRect (330,235,40,110);  // boca dcha


</Script>

Saludos!

1 respuesta

Gracias por compartir tu código, es muy útil para los que iniciamos con la programación.