Entrar Ainda não tem acesso?
2
respostas

Meu creeper centralizado no canvas (600 x 400)

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 ANTONIO GOMES DA SILVA JUNIOR
| 25.3k xp | 4 posts

Olá pessoal,

Antes de mais nada, gostaria de parabenizar toda estrutura do curso. Tem me ajudado e muito!!! Com relação ao exercício proposto; entendo que sendo a largura do canvas igual a 600 px e se quisermos manter o creeper centralizado , a coordenada inicial deveria ser 125 x 50. A minha dificuldade inicial foi encontrar uma referência para a altura dos olhos ou nariz, mas vi que essa altura deveria ser estimada.

Bons estudos para todos!!!

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

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

    pincel.fillStyle = "black";
    pincel.fillRect(225, 240, 40, 110); //Boca
    pincel.fillRect(335, 240, 40, 110); // Boca
    pincel.fillRect(265, 200, 70, 100); // Nariz
    pincel.fillRect(175, 110, 90, 90); // Olho esquerdo
    pincel.fillRect(335, 110, 90, 90); // Olho direito


</script>

Antonio Jr

2 respostas
por Luann Batuira Ribeiro
| 276.1k xp | 308 posts
Alura Scuba Team Estagiario/Scuba Team

Olá Antônio, tudo bem??

Seu código ficou muito bom! Parabéns!! Ele está bem escrito e está funcional!

Qualquer duvida é só chamar! Bons Estudos!

por Fernando Cesar Pinto Gonçalves
| 25.8k xp | 4 posts

Olá Antônio, eu também acabei fazendo ele centralizado com o canvas :). Mais o seu código ficou bem melhor escrito, parabéns e bom estudo. 

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

pincel.fillStyle = 'darkgreen';
pincel.fillRect(120,50, 350, 300);

// olho esquerdo
pincel.fillStyle = 'black';
pincel.fillRect(170,100, 90, 90);

// olho direto
pincel.fillStyle = 'black';
pincel.fillRect(330,100, 90, 90);

// nariz
pincel.fillStyle = 'black';
pincel.fillRect(260,190, 70, 100);

// boca lado esquerdo
pincel.fillStyle = 'black';
pincel.fillRect(220,240, 40, 110);

// boca lado direito
pincel.fillStyle = 'black';
pincel.fillRect(330,240, 40, 110);



</script>