Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Campo de flores usando while

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por Daniel Carvalho Santos
| 25.9k xp | 15 posts

Fiz um campo de flores utilizando while. Porém, gostaria de ter preenchido todo o canvas mas fiquei preso nisso. Alguém poderia me ajudar a solucionar?

Segue meu código: 

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 700);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }

    function desenhaFlor (x,y) {


    desenhaCirculo (x,y,15, "gold");
    desenhaCirculo (x+30,y,15, "hotpink");
    desenhaCirculo (x-30,y,15, "hotpink");
    desenhaCirculo (x,y+30,15, "magenta");
    desenhaCirculo (x,y-30,15, "magenta");

}

x = 0; 
y = 0;

while (x < 600 && y < 650) {

    desenhaFlor (x+50,y+50);
    x = x + 50;
    y = y + 75;

}

</script>
2 respostas
solução!
por João Manoel Lima
| 373.4k xp | 429 posts
Alura Scuba Team

Boa noite Daniel, tudo certo?

Você encontrou esse problema pois no seu código as duas coordenadas são iteradas em conjunto. Ou seja, quando o valor de x e y são alterados constantemente ao mesmo tempo nós iremos desenhar uma reta.

Para preencher toda a tela podemos fazer da seguinte forma: um laço de repetição vai ser responsável por desenhar as flores em todas colunas e outro laço vai ser responsável por chamar esse laço em cada uma das linhas. A implementação que fiz para seu projeto é a seguinte:

let x = 0;  // Posição inicial do X
    let y = 50; // Posição inicial de Y, para que o desenho apareça inteiro na tela
    while ( y < 700 ) {
        x = 50; // Cada vez que voltamos aqui precisamos colocar o X no começo. Imagine que é como o cabeçote de uma máquina de escrever quando vamos para a próxima linha
        while ( x < 600 ) {
            desenhaFlor(x, y); // Desenhando a flor em cada coluna
            x += 100;
        }
        y += 100;
    }

Espero ter ajudado. Bons estudos!

por Daniel Carvalho Santos
| 25.9k xp | 15 posts

Muito obrigado, João!