1
resposta

Desenhando o Creeper

<meta charset="utf-8">

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

<script type="text/javascript">
    var canvas = document.querySelector("canvas");
    var pincel = canvas.getContext("2d");
    var cores = ["darkgreen", "black"];

    var creeper = {
        cabeca: {l: 350, a: 300},
        olhos: {l: 90, a: 90},
        nariz: {l: 70, a: 100},
        boca: {l: 40, a: 110}
    }

    pincel.fillStyle = cores[0];
    pincel.fillRect(0, 0, creeper.cabeca.l, creeper.cabeca.a);         // cabeça

    pincel.fillStyle = cores[1];
    pincel.fillRect(50, 50, creeper.olhos.l, creeper.olhos.a);      // olho esquerdo

    pincel.fillStyle = cores[1];
    pincel.fillRect(210, 50, creeper.olhos.l, creeper.olhos.a);     // olho direito

    pincel.fillStyle = cores[1];
    pincel.fillRect(140, 140, creeper.nariz.l, creeper.nariz.a);     // nariz

    pincel.fillStyle = cores[1]; 
    pincel.fillRect(100, 190, creeper.boca.l, creeper.boca.a);         // parte esquerda da boca

    pincel.fillStyle = cores[1];
    pincel.fillRect(210, 190, creeper.boca.l, creeper.boca.a);         // parte direita da boca

</script>
1 resposta

Bom dia Felipe, tudo bem? Espero que sim!

Muito bom o seu código, ficou muito funcional.

Só uma coisa: Quando você define o pincel.fillStyle com a cor que deseja, ela fica até o fim do código, a menos que você a mude, então não é necessário atribuí-la toda vez antes de usar o fillRect.

Estou à disposição. Bons estudos!