EIXO X e Y NOS DESENHOS. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Eu entendi a lógica das marcações 350 e 300, contudo, não ficou claro como encontrar o número 200 e 50. Não consegui ter a visão espacial nos eixos X e Y. Seria um eixo X e Y para width e outro X e Y para height? Teria algum vídeo ou material extra sobre a marcação de valores para gerar as figuras? Apesar de compreender a dinâmica da coisa eu não consegui executar as marcações da boca do creeper (retângulo 5 e 6). Também não consegui visualizar como encontrar os números para gerar o retângulo 3 do creeper.

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

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


</script>

Olá, Wilson! Tudo bem contigo?

Tudo que for relacionado ao eixo x significa a largura de algo que você queira implantar e a mesma coisa se refere ao eixo y no que diz respeito a altura. É como imaginarmos uma cruz!!!

Agora vamos ao exercício:

Primeiro vamos definir a área em que queremos trabalhar através do canvas

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

Aqui estou dizendo que quero uma largura de 600 e altura de 400. Logo, teremos um retângulo como área de trabalho.

Feito isso vamos começar nosso desenho pela cabeça.

Definimos a cor

pincel.fillStyle = 'darkgreen';

Agora, é como se eu colocasse a ponta do lápis em um ponto para desenhar dentro do canvasque eu estipulei lá no início.

O meu ponto de origem na largura será o X e também meu ponto de origem da altura será o Y. Agora vou dizer até onde vou desenhar a largura através da posição X e até onde vou chegar na posição Y.

Então nosso código ficará: X, Y, X, Y = Origem X, Origem Y, Destino X, Destino Y.

No seu código, coloque nosso primeiro desenho

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

Agora veja que o início do X é na posição 200 (quase na metade do canvas) enquanto o Y está na posição 50 (pouca coisa distante da margem superior). Sempre tendo em mente que na origem X e Y estão no mesmo ponto. Para desenhar, quero que meu X vá para a posição 350 (um pouco mais que a metade) e meu Y para a posição 300 (faltando 100 para a margem inferior).

Como o tamanho do seu canvasestá invisível e queira ver qual o tamanho desse canvas. Faça o seguinte

    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0,0,600,400);

Desse forma vai te dar uma noção para a construção no Creeper.

Voltando as coordenadas originais

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

Agora é seguir com os demais conforme o exercício

    // olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(250, 110, 90, 90);
    pincel.fillRect(410, 110, 90, 90);

    // nariz
    pincel.fillRect(340, 200, 70, 100);

    // boca ou barba
    pincel.fillRect(300, 240, 40, 110);
    pincel.fillRect(410, 240, 40, 110);

Espero ter ajudado, Wilson!

Peço que analise cada coordenada para que compreenda onde é a origem do seu X e Y e para onde estão indo.

Creio que agora, principalmente depois de ter visualizado o tamanho do canvas, vai te dar uma real visão do seu campo de trabalho!

Qualquer dúvida é só nos procurar, Wilson!

Até breve!!!