1
respuesta

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 Estudiante
| 61.8k xp | 10 posts
<meta charset = "utf-8">
<canvas width="600" height="400"> </canvas>

<script>

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

    pincel.fillStyle = "white";
    pincel.fillRect(0,0,600,400);


    //cabeza 1

    pincel.fillStyle = "darkgreen";
    pincel.beginPath();
    pincel.moveTo(125,50);
    pincel.lineTo(125,350);
    pincel.lineTo(475,350);
    pincel.lineTo(475,50);
    pincel.fill();

    // boca 5

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(225,350);
    pincel.lineTo(225,240);
    pincel.lineTo(265,240);
    pincel.lineTo(265,350);
    pincel.fill();

    //boca 6
    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(335,350);
    pincel.lineTo(335,240);
    pincel.lineTo(375,240);
    pincel.lineTo(375,350);
    pincel.fill();

    //nariz 4

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(265,300);
    pincel.lineTo(265,200);
    pincel.lineTo(335,200);
    pincel.lineTo(335,300);
    pincel.fill();

    //ojo 2

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(265,200);
    pincel.lineTo(175,200);
    pincel.lineTo(175,110);
    pincel.lineTo(265,110);
    pincel.fill();

    //ojo 3

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(335,200);
    pincel.lineTo(335,110);
    pincel.lineTo(425,110);
    pincel.lineTo(425,200);
    pincel.fill();


</script>
1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Estudiante!

El código que compartiste es un ejemplo de cómo dibujar la cabeza de un Creeper en un canvas utilizando JavaScript. El código utiliza el objeto canvas y su contexto 2D para dibujar formas y figuras en la pantalla.

La función fillRect se utiliza para dibujar un rectángulo blanco en el canvas y establecer un fondo para la imagen. Luego, se utilizan las funciones moveTo y lineTo para dibujar las diferentes partes de la cabeza del Creeper, como la boca, la nariz y los ojos.

Es importante mencionar que este código solo dibuja la cabeza de un Creeper y no tiene interacción con el usuario. Si deseas agregar interactividad, deberás agregar eventos de mouse o teclado al canvas.

Espero que esto te haya ayudado a entender un poco más sobre cómo dibujar en un canvas utilizando JavaScript. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)