1
resposta

Construindo o Creeper em função de um ponto central e com as medidas baseadas em pixels.

<meta charset="UTF-8">

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

<script>

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

    var pixel = 40;
    var margem = 10;

                // [largura, altura];
    var cabeca = [08 * pixel, 08 * pixel];
    var olhos = [02 * pixel, 02 * pixel ];
    var nariz = [02 * pixel, 03 * pixel];
    var cantosBoca = [01 * pixel, 03 * pixel];

    var meioTelaHorizontal     = cabeca[0]/2 + margem;
    var meioTelaVertical     = cabeca[1]/2 + margem - pixel;

    var origemCabecaX = meioTelaHorizontal     - cabeca[0]/2;
    var origemCabecaY = meioTelaVertical     - cabeca[1]/2 + pixel;

    // Você pode modificar as duas variáveis anteriores para que a cabeça do Creeper fique centralizada na tela, para isso, substitua os valores da cabeca por tela.width e tela.heigth. (Esses dois métodos retornam os valores, width e heigth, que você definiu em <canvas>.)

    pincel.fillStyle = "darkgreen";

    pincel.fillRect(    origemCabecaX,
                        origemCabecaY,
                         cabeca[0],
                         cabeca[1]
                    );

    pincel.fillStyle = "black";

    pincel.fillRect(    meioTelaHorizontal - (nariz[0]/2) - olhos[0],
                        meioTelaVertical - olhos[1],
                         olhos[0],
                         olhos[1]
                    );

    pincel.fillRect(    meioTelaHorizontal + nariz[0]/2,
                        meioTelaVertical - olhos[1],
                         olhos[0],
                         olhos[1]
                    );

    pincel.fillRect(    meioTelaHorizontal - nariz[0]/2,
                        meioTelaVertical,
                         nariz[0],
                         nariz[1]
                    );

    pincel.fillRect(    meioTelaHorizontal - (nariz[0]/2) - cantosBoca[0],
                        meioTelaVertical + (nariz[1]/3),
                        cantosBoca[0],
                        cantosBoca[1]
                    );

    pincel.fillRect(    meioTelaHorizontal + (nariz[0]/2),
                        meioTelaVertical + (nariz[1]/3),
                        cantosBoca[0],
                        cantosBoca[1]
                    );

</script>
1 resposta

Legal Yann, boa ideia.