Como posso melhorar? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<canvas width="600" height="400"></canvas> <script type="text/javascript"> var tela = document.querySelector('canvas'); var pincel = tela.getContext('2d'); function desenhaQuadrado(x, y, cor){ pincel.fillStyle = 'green'; pincel.fillRect(x, y, 50, 50); pincel.fillStroke =' black'; pincel.strokeRect(x, y, 50, 50); } function desenhaTexto(texto, x , y) { var tela = document.querySelector('canvas'); var pincel = tela.getContext('2d'); pincel.font = '14px Georgia'; pincel.fillStyle = 'black'; pincel.fillText(texto, x, y); } desenhaTexto('Qual é a fração?', 10, 20); for(x = 0; x < 150; x = x + 50){ desenhaQuadrado(x, 50, 50); } pincel.strokeRect(150, 50, 50, 50); </script>

Fala, Diego!!! Tudo bem, contigo? Espero que sim!!!

Bacana compartilhar seu código conosco!!!

Podemos fazer algumas alterações. Vamos lá!

Podemos fazer com que na sua função desenhaQuadrado possa fazer o quadrado e a borda ao mesmo tempo, por exemplo, e economizaríamos o for no final do seu código ;-)

Vamos começar do mesmo jeito

function desenhaQuadrado(x, y, cor) {

Dentro do for eu estipulo meu contador, que enquanto esse contador for menor que a quantidade de quadrados pintados vezes 100 (tamanho que vai influenciar na quantidade se alterado) e esse contator seja somado para gerar o próximo quadrado (mas estipulei somente 1 para colorir)

for (var contador = 0; contador < 1 * 100; contador = contador + 100) {

Pintaremos com a cor escolhida e executaremos os parâmetros do for

      pincel.fillStyle = cor;
      pincel.fillRect(x + contador, y, 100, 100);

Agora vamos para o total de quadrados (ou bordas). Vamos estipular 4. Segue a mesma sequencia do anterior

for (var contador = 0; contador < 4 * 100; contador = contador + 100) {

Damos formas a elas

      pincel.strokeStyle = 'black';
      pincel.strokeRect(x + contador, y, 100, 100);

Essa parte completa ficará dessa forma

  function desenhaQuadrado(x, y, cor) {

    for (var contador = 0; contador < 1 * 100; contador = contador + 100) {

      pincel.fillStyle = cor;
      pincel.fillRect(x + contador, y, 100, 100);

    }

    for (var contador = 0; contador < 4 * 100; contador = contador + 100) {

      pincel.strokeStyle = 'black';
      pincel.strokeRect(x + contador, y, 100, 100);

    }

  }

No final, a única alteração seria essa

desenhaQuadrado(50, 50, 'purple');

Coloquei roxa, mas poderia ser qualquer outra rs

Tente realizar essa modificações e nos retorne para eu saber se deu tudo certo!!! \o/

Bons estudos, Diego!!!

Um abraço e até breve!