La cara de Creeper (Vampire Creeper) | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Les dejo mi versión Vampire Creeper jajaja xD

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

<body>
    <h1> Vampire Creeper</h1>
    <canvas width="600" height="400"></canvas>
    <script>

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


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

        //Ojos
        pincel.fillStyle = "black";
        pincel.fillRect(150, 100, 90, 90);

//ojo rojo derecho
        pincel.fillStyle = "red" // Propiedad
        pincel.beginPath(); //inicia un camino el lapiz
        pincel.moveTo(120,100); //Se mueve al centro
        pincel.arc(195,145,10,3,14);
        pincel.fill(); //llenalo con el color de estilo


        pincel.fillStyle = "black";
        pincel.fillRect(310, 100, 90, 90);

        //ojo rojo izquierdo
        pincel.fillStyle = "red" // Propiedad
        pincel.beginPath(); //inicia un camino el lapiz
        pincel.arc(355,145,10,3,14);
        pincel.fill(); //llenalo con el color de estilo


        //Nariz
        pincel.fillStyle = "black";
        pincel.fillRect(240, 190, 70, 100);

        //Bocas
        pincel.fillStyle = "black";
        pincel.fillRect(200, 240, 40, 110);

        pincel.fillStyle = "black";
        pincel.fillRect(310, 240, 40, 110);

        //colmillo 1
        pincel.fillStyle = "red" // Propiedad
        pincel.beginPath(); //inicia un camino el lapiz
        pincel.moveTo(220, 350); //Se mueve al centro
        pincel.lineTo(200, 295);//crea una linea hasta las coordenadas especificadas
        pincel.lineTo(240, 295);
        pincel.fill(); //llenalo con el color de estilo
        //colmillo 1
        pincel.fillStyle = "red" // Propiedad
        pincel.beginPath(); //inicia un camino el lapiz
        pincel.moveTo(330, 350); //Se mueve al centro
        pincel.lineTo(310, 295);//crea una linea hasta las coordenadas especificadas
        pincel.lineTo(350, 295);
        pincel.fill(); //llenalo con el color de estilo



    </script>

</body>