[Projeto] 'for' para escrever menos e escolher a quantidade de quadrados a ser impresso.

Decidi reescrever esse código de forma a deixá-lo menos verboso e até deixando automático a quantidade de quadrados que queremos imprimir, pois sempre estamos falando de um código legível e de fácil manutenção.

obs.: Não sei se é uma boa prática jogarmos uma função para dentro da estrutura do 'for', vou pesquisar a respeito mas vou deixar esse código aqui antes hahaha

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

<script>
//Y = Altura;
//X = Comprimento;

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

//tela na cor cinza, só porque eu acho mais bonitin.
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);

function escreve(texto, x, y) {
    pincel.font = '20px Georgia';
    pincel.fillStyle = 'black';
    pincel.fillText(texto, x, y);
}

function desenhaQuadrado(x, y, tamanho, cor) {
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, tamanho, tamanho);

    pincel.strokeStyle = 'black';
    pincel.strokeRect(x, y, tamanho, tamanho);
}

function quantidadeDeQuadrados(quantidadeDesejada) {
    var resultado = (quantidadeDesejada * 50) + 50;
    //A quantidade desejada de quadrados deve ser multiplicada por 50, que é tamanho padrão dos nossos quadrados.
    return resultado;
    //Aqui eu precisei retornar o valor da conta efetuada acima.  
}

escreve('Qual é a fração?', 50, 40);

//Looping onde declaramos a quantidade de quadrados que serão impressos.
    //A quantidade de quadrados fica limitada a 10 conforme o tamanho da nossa tela/canva.
for (let i = 50; i < quantidadeDeQuadrados(3); i = i + 50 ) {
    desenhaQuadrado(i, 50, 50, 'green');
    pincel.strokeRect(i+50, 50, 50, 50);
    //para criar apenas a borda do último quadrado eu somei o valor de 'i' + 50. 
}

</script>

Olá, Guilherme!

É uma ótima ideia! Deixar o código mais legível e fácil de manter é sempre importante.

Uma forma de fazer isso é utilizar um loop for para criar a quantidade desejada de quadrados. No seu caso, você já possui a função quantidadeDeQuadrados(quantidadeDesejada) que retorna o valor necessário para o loop.

Dentro do loop, você pode chamar a função desenhaQuadrado() passando as coordenadas e a cor desejada. Assim, o código fica mais dinâmico e você não precisa repetir várias vezes a chamada da função.

Aqui está um exemplo de como ficaria o código utilizando o loop for:

for (let i = 50; i < quantidadeDeQuadrados(3); i = i + 50 ) {
    desenhaQuadrado(i, 50, 50, 'green');
    pincel.strokeRect(i+50, 50, 50, 50);
}

Dessa forma, você consegue imprimir a quantidade desejada de quadrados de forma automatizada.

Bons estudos!