Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Preenchendo toda a tela com os quadrados.

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Como eu amo esse tal de loop!

por Pedro Willen Nunes Santiago
| 44.6k xp | 3 posts

Ao final desta aula, fiz um programa para preencher toda a tela, primeiro tentei usar o while mas não funcionou, ao contrário do for que deu certo.

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

<script>

    function desenhaQuadrado(x, y, cor) {

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

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

    }

    for (var x = 0; x < 600; x += 50){
        for (var y = 0; y < 400; y += 50){
            desenhaQuadrado (x, y, "green")
        }
    }

</script>

Como eu tenho o mesmo resultado com o while?

1 resposta
solução!
por Douglas de Oliveira Lima
| 137k xp | 47 posts

Olá!

O looping em For permite declarar a variável contadora e seu incremento na própria estrutura. Para replicar a mesma estratégia com o While, é preciso que, antes de declarar o loop, seja declarada a variável contadora e, para incrementar o valor, adicionar a soma no final da estrutura do loop.

O código abaixo replica o mesmo resultado do seu código, mas utilizando While ao invés de For:

var x = 0;

while(x < 600) {
    var y = 0;
    while(y < 400) {
        desenhaQuadrado (x, y, "green");
        y += 50;
    }
    x += 50;
}