Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Creeper

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade A cara do Creeper

por Thiago Ribeiro de Souza Melo
| 46.6k xp | 65 posts

A imagem ficou bem semelhante, não sei se fiz exatamente, mas encaixou tudo certinho! :D

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

<script>

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

    pincel.fillStyle = "darkgreen";
    pincel.fillRect(0, 0, 350, 300);

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

    pincel.fillRect(140, 145, 70, 100);

    pincel.fillRect(100, 190, 40, 110);
    pincel.fillRect(210, 190, 40, 110);

</script>
2 respostas
solução!
por Carlos Henrique Santos Araujo
| 16.9k xp | 6 posts

Iai Thiago ! Puts, eu também fiz com eixo 0 , 0 mas com algumas coordenadas bem diferentes.

Acho que tudo tem haver com o tamanho da "cabeça". Mas ficou bem parecido até !

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

</canvas>


<script>

var tela = document.querySelector('canvas');

var pincel = tela.getContext('2d');

//_________________________________Cabeça

    pincel.fillStyle = 'darkgreen'
    pincel.fillRect(0, 0, 600,400)

//__________________________________Olhos

    pincel.fillStyle = 'black'
    pincel.fillRect(171, 100, 100,100)

    pincel.fillStyle = 'black'
    pincel.fillRect(355, 100, 100,100)

//__________________________________Nariz

    pincel.fillStyle = 'black'
    pincel.fillRect(270, 200, 90,110)

//__________________________________Boca

    pincel.fillStyle = 'black'
    pincel.fillRect(360, 260, 50,140)

    pincel.fillStyle = 'black'
    pincel.fillRect(220, 260, 50,140)




</script>
por Thiago Ribeiro de Souza Melo
| 46.6k xp | 65 posts

Verdade. Acredito que se colocássemos centralizado, ficaria igualzinho! :