Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

A cara do Creeper - Solução

Minha solução não ficou igual do professor, porém gostei do resultado dela.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A cara do Creeper</title>
</head>
<body>
    <h1>A cara do Creeper</h1>

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

    <script>
        let canvas = document.querySelector('canvas')
        let pincel = canvas.getContext('2d')

        // Fundo 
        pincel.fillStyle = 'gray'
        pincel.fillRect(0, 0, 600, 400)

        // Cabeça do Creeper
        pincel.fillStyle = 'green'
        pincel.fillRect(125, 50, 350, 300)

        // Olho preto lado esquerdo
        pincel.fillStyle = 'black'
        pincel.fillRect(170, 100, 90, 90)

        // Olho preto lado direito
        pincel.fillStyle = 'black'
        pincel.fillRect(330, 100, 90, 90)

        // Nariz
        pincel.fillStyle = 'black'
        pincel.fillRect(260, 190, 70, 100)

        // Boca
        pincel.fillStyle = 'black'
        pincel.fillRect(220, 250, 40, 100)
        pincel.fillRect(320, 250, 40, 100)

    </script>

</body>
</html>
3 respostas

Boa Anthoni,

Gostei da solução que você propôs, afinal o resultado é o mesmo porém o código me parece muito mais robusto.

Para que mais pessoas consigam visualizar a sua solução proposta é recomendável com que você venha estar marcando este tópico como solucionado, assim pode estar ajudando ainda mais pessoas :)

Obrigado!!

solução!

Valeu amigo, só acho que não precisava repetir pincel.fillStyele = 'black'

Boa solução!