Creeper | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Executei o creeper com as coordenadas do exercício, e fiz um outro com outras coordenadas e um pouco mais detalhado.

<meta charset="UTF-8">

<canvas width="1000" height="1000"></canvas>

<script>

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

//meu creeper

//cabeça
    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 400, 400);

//detalhes
    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(0, 0, 50, 50);

    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(0, 200, 50, 150);

    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(150, 0, 200, 50);

    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(350, 50, 50, 150);

    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(250, 50, 50, 50);

    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(250, 200, 50, 50);

    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(350, 250, 50, 50);

    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(50, 350, 50, 50);

    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(150, 100, 50, 50);

//olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(50, 100, 100, 100);

    pincel.fillStyle = 'black';
    pincel.fillRect(250, 100, 100, 100);

//nariz e boca
    pincel.fillStyle = 'black';
    pincel.fillRect(150, 200, 100, 50);

    pincel.fillStyle = 'black';
    pincel.fillRect(100, 250, 200, 100);

    pincel.fillStyle = 'black';
    pincel.fillRect(100, 350, 50, 50);

    pincel.fillStyle = 'black';
    pincel.fillRect(250, 350, 50, 50);


//creeper atividade

// cabeça
    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(500,0,350,300);

// olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(550, 60, 90, 90);
    pincel.fillRect(710, 60, 90, 90);

// nariz e boca
    pincel.fillRect(640, 150, 70, 100);
    pincel.fillRect(600, 190, 40, 110);
    pincel.fillRect(710, 190, 40, 110);    

</script>

Nossa que interessante Marinho, eu tive muita dificuldade em acertar as posições do blocos, felizmente consegue chegar em um resultado semelhante a atividade, mais sem duvida nenhuma o seu ficou show.

Vou deixar o meu aqui.

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

<script>

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

    /*
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0,0,600,400);
    */

    //1 Cabeça
    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(125,50,350,300);

    //2 Olho Esquerdo
    pincel.fillStyle = 'black';
    pincel.fillRect(175,105,90,90);

    //3 Olho Direito
    pincel.fillStyle = 'black';
    pincel.fillRect(335,105,90,90);

    //4 Nariz
    pincel.fillStyle = 'black';
    pincel.fillRect(265,195,70,100);

    //5 Parte da Boca Esquerdo
    pincel.fillStyle = 'black';
    pincel.fillRect(225,240,40,110);

    //6 Parte da Boca Direita
    pincel.fillStyle = 'black';
    pincel.fillRect(335,240,40,110);


</script>