[Dúvida] Desenho <canvas> | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Olá, Athaide, tudo bem?

É super normal ter essa dificuldade. Nesses casos, podemos utilizar algumas dicas de proporções, mas também podemos iniciar algumas partes se baseando na posição x e y do elemento anterior e ir testando(e isso iremos fazer bastante na programação).

Por exemplo, não queremos que o nosso Creeper inicie grudado no nosso Canvas, considerando que ele tem largura 600 e altura 400. Logo o x e y da cabeça não poderá ser 0, mas sim um pouco mais afastado, na resolução da questão tá 200 e 50 respectivamente, mas é importante frisar que esse valor pode variar na resposta de cada um . O importante é seguir as medidas de largura e altura que a questão pede (350 e 300, respectivamente).

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

Considerando que a nossa cabeça começou no x=200, já não iremos iniciar o olho no x=200, pois ficaria grudado, e aí colocamos uma margem, na resolução foi colocado 50, ficando o x=250. A mesma lógica foi utilizada no y, que ficou com o valor de 110. Note que ao fazer o segundo olho (direito), após dá uma margem no x para não saírem grudados, baseamos o valor do y conforme o primeiro olho, y=110.

Construção do personagem creeper do minecraft. Há um fundo verde, onde os olhos é composto por dois quadrados pretos, abaixo há um retângulo preto que é o nariz, e em seguida dois retângulos pretos que juntos ao nariz formam a barba. Há duas setas vermelhas, a primeira aponta para o y dos olhos que é 100.

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

O nariz do nosso Creeper se iniciará na última posição x do primeiro olho, para saber essa posição basta somar a posição x inicial do olho mais a largura(250+90), que dará 340. O y você poderá testar um que você ache adequado, na questão utilizamos 200.

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

Nota-se que o x da barba inicia-se na metade do x do olho, poderemos encontrar esse valor pegando a metade da largura do olho, e para encontrar o x, somamos esse valor do x do olho.

Essa conta ficará largura/2, que seria 90/2 = 45. Somamos X=250 + 45, esse valor será de 295, na resolução foi arredondado para 300.

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

Reforço que poderá ter divergências nas posições x e y, e que essa atividade é baseada muito em testes, onde você irá testar se está sendo formado o Creeper.

Espero que eu tenha ajudado.

Qualquer dúvida, estou à disposição.

Grande abraço.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!