Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como foram definido estas coordenadas?

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 Emerson Junior Daniel Silva
| 161.3k xp | 16 posts
Senior Software Engineer - React Native

Olá eu gostaria de saber como o professor definiu estas coordenadas (cabeça é 200(X), 50(Y), 350 pixels de altura e 300 pixels de largura)? Porque como mencionado no tópico logo abaixo as minhas coordenadas também ficaram totalmente diferentes do que foram definidas pelo professor. Estas coordenadas pode influenciar no desenho da página?

<!DOCTYPE html>
<html>
<title>Minecraft creeper</title>

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

<script>

    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, 70, 90, 90);

    pincel.fillStyle = 'black';
    pincel.fillRect(210, 70, 90, 90);

    pincel.fillStyle = 'black';
    pincel.fillRect(140, 160, 70, 100);

    pincel.fillStyle = 'black';
    pincel.fillRect(100, 200, 40, 100);

    pincel.fillStyle = 'black';
    pincel.fillRect(210 , 200, 40, 100);

</script>

</html>
3 respostas
solução!
por lucas.takeshi
| 582.9k xp | 1018 posts

Olá Emerson,

não tem problema as coordenadas terem ficado um pouco diferentes, o resultado foi praticamente o mesmo. A única diferença é que o desenho da cabeça ficou um pouco mais a esquerda no seu site do que na solução do instrutor.

No seu caso o desenho começa a partir da posição x igual a 0 e y igual a 0. Na solução do exercício usaram usou x igual a 200 e y igual a 50, o que faz a cabeça ficar um pouco mais a esquerda e para baixo.

Se quiser deixar exatamente igual, só trocar no fillRect os 2 primeiros números, somando 200 no primeiro e 50 no segundo. Por exemplo, no ultimo está assim

 pincel.fillRect(210 , 200, 40, 100);

Somando os valores ele teria que ficar assim

 pincel.fillRect(410 , 250, 40, 100);
por Gleilson
| 161.3k xp | 56 posts

Acredito que o único problema no seu é o uso desnecessário desse código pincel.fillStyle = 'black'; você não precisa repetir ele várias vezes já que todas as formas serão na cor preta.

<!DOCTYPE html>
<html>
<title>Minecraft creeper</title>

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

    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, 70, 90, 90);
    pincel.fillRect(210, 70, 90, 90);
    pincel.fillRect(140, 160, 70, 100);
    pincel.fillRect(100, 200, 40, 100);
    pincel.fillRect(210 , 200, 40, 100);

</script>
</html>
por Emerson Junior Daniel Silva
| 161.3k xp | 16 posts
Senior Software Engineer - React Native

Eu acabei repetindo muitas vezes mesmo, muito obrigado pela dica Gleilson. Será que tem uma maneira de simplificar essa lista de parâmetros para os detalhes do desenho ou esta já é uma maneira simplificada?