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>

<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>