Entrar Ainda não tem acesso?
2
respostas

Exercício Creeper - Será que esta certinho?

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 Jaqueline
| 85.8k xp | 48 posts

Fiz o exercício, mas quando comparei com o resultado do professor não eram as mesma coordenadas.

No meu navegador parece certinho, mas agora estou com dúvidas. 

<canvas width="600" height="400"></canvas>
<script type="text/javascript">

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


    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0, 0, 350, 300);
    pincel.fillStyle = 'black';
    pincel.fillRect(45,50,90,90);//olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(205,50,90,90);//olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(135,140,70,100); // nariz
    pincel.fillStyle = 'black';
    pincel.fillRect(95,190,40, 110); // boca
    pincel.fillStyle = 'black';
    pincel.fillRect(205,190,40, 110); // boca


</script>
2 respostas
por José Henrique Merlo
| 100.6k xp | 40 posts
Estudante de Engenharia Elétrica

Ei Jaqueline, tudo bem? :)

Na verdade, se você fizer algumas continhas vai perceber que o seu creeper está um pouquinho de nada desalinhado para esquerda... Temos que: cada olho mede 90px de largura e o nariz 70px, logo 90+90+70 = 250. Como a cabeça tem 350px de largura, 350px-250px = 100px. Isso corresponde a uma margem de 50px em cada lado. Ou seja, o primeiro olho do seu creeper deveria ser originado na posição 50, e não 45. Por sua vez, todos os outros itens estão desalinhados em 5px para esquerda. O código final deveria ser algo do tipo:

<canvas width="600" height="400"></canvas>
<script type="text/javascript">

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


    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0, 0, 350, 300);
    pincel.fillStyle = 'black';
    pincel.fillRect(50,50,90,90);//olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(210,50,90,90);//olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(140,140,70,100); // nariz
    pincel.fillStyle = 'black';
    pincel.fillRect(100,190,40, 110); // boca
    pincel.fillStyle = 'black';
    pincel.fillRect(210,190,40, 110); // boca


</script>
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Olá, Jaqueline! Tudo bem contigo?

É exatamente como o José Henrique disse!

A diferença está no alinhamento do seu "Creeper".

Sendo o seu canvas nas medidas

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

Logo ele ficará desalinhado, apesar de não parecer quando vemos no navegador.

Bons estudos e até breve!!!