1
resposta

Minecraft

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
/*Retângulo 01 - Cabeça*/
    pincel.fillStyle = 'green'
    pincel.fillRect(50, 50, 350, 300);


/*Retângulo 02 - olho esquerdo*/
    pincel.fillStyle = 'black';
    pincel.fillRect(105, 90, 90, 90);

/*Retângulo 03 - olho direito*/
    pincel.fillStyle = 'black';
    pincel.fillRect(260, 130, 90, 20);


/*Retângulo 04 - nariz*/
    pincel.fillStyle = 'black';
    pincel.fillRect(195, 180, 70, 100);

/*Retângulo 05 - boca*/
    pincel.fillStyle = 'black';
    pincel.fillRect(155, 290, 150, 20);

    pincel.fillStyle = 'black';
    pincel.fillRect(305, 270, 20, 20);






</script>
1 resposta

Oi José Henrique, tudo bem?

Obrigado pela paciência em aguardar uma resposta!

Parabéns pela organização, clareza e boa indentação do seu código. Ao observar o resultado obtido, percebi que você personalizou o rosto do personagem, isso é muito bacana, pois realizar tais alterações ajuda a compreender melhor a lógica por detrás dos comandos.

Tenho algumas sugestões para deixar a escrita do seu código mais reduzida:

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

<script>

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

    //Retângulo 01 - Cabeça
    pincel.fillStyle = 'green'
    pincel.fillRect(50, 50, 350, 300);

    //Retângulo 02 e 03 - olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(105, 90, 90, 90); // esquerdo
    pincel.fillRect(260, 130, 90, 20); // direito

    //Retângulo 04 - nariz
    pincel.fillRect(195, 180, 70, 100);

    //Retângulo 05 - boca
    pincel.fillRect(155, 290, 150, 20);
    pincel.fillRect(305, 270, 20, 20);

</script>

Perceba que eu removi dos retângulos 4 e 5 a linha pincel.fillStyle = 'black';. Essa propriedade se refere ao estilo de cor utilizado pelo pincel, e ela se repete para todos os elementos criados abaixo até que seja utilizada novamente para trocar a cor desejada. Como você utilizou ela no retângulo 2, ela não precisaria estar presente nos retângulos subsequentes, a menos que eles tivessem cores distintas.

Outra observação que fiz em seu código foi remover a linha comentada que descrevia o olho direito. Dessa forma, juntei o desenho dos dois olhos num mesmo bloco e identifiquei cada um por meio de comentários nas linhas de comando.

A última mudança é referente a forma de realizar as linhas comentadas. O padrão que você utilizou (/*Retângulo 01 - Cabeça*/) se adequa melhor para comentar grande volume de linhas de código. Para comentar apenas uma linha você pode utilizar uma dupla de barras (//Retângulo 01 - Cabeça).

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição para te auxiliar :)

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