[Proyecto] Cara de Creeper

¡Hola Alan!

Gracias por compartir tu código con nosotros. Parece que estás haciendo una cara de Creeper con HTML5 Canvas y JavaScript.

Tu código se ve bien, pero si me permites sugerirte algunas mejoras, podrías hacer que los ojos y la boca del Creeper se vean más realistas. En lugar de simplemente dibujar rectángulos negros, podrías hacer círculos para los ojos y una línea curva para la boca.

Para hacer los ojos, podrías usar el método arc() del objeto CanvasRenderingContext2D. Por ejemplo, podrías reemplazar las líneas:

pincel.fillStyle = "black"
pincel.fillRect(55,45,90,90);

pincel.fillStyle = "black"
pincel.fillRect(215,45,90,90);

con:

pincel.beginPath();
pincel.arc(100, 90, 30, 0, 2 * Math.PI);
pincel.fill();

pincel.beginPath();
pincel.arc(260, 90, 30, 0, 2 * Math.PI);
pincel.fill();

Esto dibujará dos círculos negros para los ojos.

Para la boca, podrías usar el método quadraticCurveTo() del objeto CanvasRenderingContext2D. Por ejemplo, podrías reemplazar las líneas:

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

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

con:

pincel.beginPath();
pincel.moveTo(110, 250);
pincel.quadraticCurveTo(145, 190, 180, 250);
pincel.stroke();

pincel.beginPath();
pincel.moveTo(220, 250);
pincel.quadraticCurveTo(255, 190, 290, 250);
pincel.stroke();

Esto dibujará dos líneas curvas para la boca.

¡Espero que esto te ayude a mejorar tu proyecto! Si tienes alguna otra pregunta, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!