Entrar Ainda não tem acesso?
1
resposta

While para o quadrado branco | A lógica está certa?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Frações

por adriel.costa
| 31.3k xp | 1 posts
Estagiário em Infraestrutura 
<canvas width = "600" height = "400">
</canvas>

<script>

    function desenhaQuadrado(x, y, tamanho, cor) {

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

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, tamanho);
        pincel.strokeStyle =  'black';
        pincel.strokeRect(x, y, 50, tamanho);
    }


    function desenhaTexto(texto, x, y){

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

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

    desenhaTexto("Qual é a fração?" , 0, 30);

 var x = 0;

    while(x < 150) {

        desenhaQuadrado(x, 50, 50, 'green');

        x = x + 50;

    }

    if (x = 150){

            desenhaQuadrado(x, 50, 50, 'white');
        }

</script>
1 resposta
por Mônica Mazzochi Hillman
| 932.5k xp | 1472 posts
Instrutor Instrutora

Boa tarde, Adriel! Tudo bem?

A lógica está correta sim, desse jeito não precisa chamar todas as vezes a função desenhaQuadrado(). Na programação temos diversas maneiras de resolver o mesmo problema.

Ainda assim, sempre podemos refatorar um código. Refatoração é o processo de modificar um sistema de software para melhorar a estrutura interna do código sem alterar seu comportamento externo. Dito isso, segue algumas dicas:

1 - Dentro da função desenhaQuadrado() já recebemos o valor de tamanho quando enviamos, então não seria necessário colocar 50 digitado dentro do fillRect():

    function desenhaQuadrado(x, y, tamanho, cor) {

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

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

2 - Nesse caso que está acontecendo o código (aumentando 50 no x por vez) não precisa do if pra desenhar o quadrado branco. Como o while já tem a condição de ser o quadrado verde enquanto for menor que 150, então ele interpreta sozinho pra desenhar o branco depois que acabar o while.

 var x = 0;

    while(x < 150) {
        desenhaQuadrado(x, 50, 50, 'green');
        x = x + 50;
    }

    desenhaQuadrado(x, 50, 50, 'white');

Espero que esteja aprendendo bastante com nossos cursos. Qualquer coisa, pode contar conosco! Bons estudos!