duvida button | Lógica de programação | Alura

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

<button onclick="desenhaflor(roletax[posicao1], roletay[posicao2], listaCor[posicaoCor])">Gere uma flor.</button>

<script>

    var roletax = [];

    var roletay = [];

    var listaCor = ["red", "blue", "pink", "white", "purple"];

    var posicaoCor = Math.floor(Math.random() * listaCor.length);

    var posicao2 = Math.floor(Math.random() * roletay.length);

    var posicao1 = Math.floor(Math.random() * roletax.length);


    function aleatoriox() {

        var i;[]
        for(i = 0; i <= 10; i++){

            var resx = Math.floor(Math.random() * 600);
            roletax.push(resx)
        }
    }

    function aleatorioy() {

        var i;
        for(i = 0; i <= 10; i++){

            var resy = Math.floor(Math.random() * 400);
            roletay.push(resy)
        }
    }

    var x1 = aleatoriox();
    var y1 = aleatorioy();

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

    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, cor){

        var tamanho = 20;

        pincel.fillStyle = 'green';
        pincel.fillRect(x - 10, y, 20, 400);

        desenhaCirculo(x, y, tamanho, "yellow");

        desenhaCirculo(x+40, y, tamanho, cor);
        desenhaCirculo(x-40, y, tamanho, cor);
        desenhaCirculo(x, y+40, tamanho, cor);
        desenhaCirculo(x, y-40, tamanho, cor);
        desenhaCirculo(x+30, y+30, tamanho, cor);
        desenhaCirculo(x-30, y-30, tamanho, cor);
        desenhaCirculo(x-30, y+30, tamanho, cor);
        desenhaCirculo(x+30, y-30, tamanho, cor);

    }

</script>

olá , eu quero uma ajuda eu to fazendo o exercício de logica de programação ll, a dar flor, bom eu quero juntar meu conhecimentos do curso 1 pro 2, entao eu queria criar um botao que gera a flor automaticamente, deu certo mas quando eu aperto dnv ele n muda ele fica fixo, alguem poderia me ajudar

Olá, Nicolas! Tudo bom?

Desde já, agradeço a paciência em aguardar uma resposta!

O motivo da florzinha sempre permanecer no mesmo lugar deve-se ao fato de que as variáveis que armazenam os valores aleatórios foram inicializadas durante a leitura do código pelo navegador. Por conta disso, não conseguimos alterá-las novamente ao longo do programa.

Trouxe aqui uma solução para isso. Vamos dar uma olhada mais de perto? Para compreender as alterações feitas, separei o processo em algumas etapas, vamos lá!

Removendo os parâmetros de `desenhaFlor()`

Para a ideia que irei propor, precisaremos, logo de início, remover os parâmetros da função que faz o desenho da flor, da seguinte maneira:

function desenhaflor(){
    // seu código vem aqui!
}

Depois disso, precisaremos remover os valores que passamos lá em cima do arquivo, os quais seriam utilizados pela função desenhaflor() assim que o botão fosse clicado. Ao fim, teremos isso:

<button onclick="desenhaflor()">Gere uma flor.</button>

Criando uma função que sorteia os valores de posição

Para dinamizar a posição e a cor das florzinhas, podemos, por exemplo, criar uma função que realiza este processo (sempre que clicarmos no botão, novos valores serão gerados). Antes de criá-la, precisamos:

Somente declarar as variáveis posicaoCor, posicao1 e posicao2, no início do script, sem atribuir valores:

  var roletax = [];
  var roletay = [];
  var listaCor = ["red", "blue", "pink", "white", "purple"];
  var posicaoCor;
  var posicao1;
  var posicao2;

Com isso feito, podemos partir para a função, olha só como ela ficou:

function sorteiaValores() {
    posicaoCor = Math.floor(Math.random() * listaCor.length);
    posicao1 = Math.floor(Math.random() * roletax.length);
    posicao2 = Math.floor(Math.random() * roletay.length);

    return posicaoCor, posicao1, posicao2
}

A função sorteiaValores() terá como objetivo gerar novos valores para posicaoCor, posicao1 e posicao2, variáveis que serão retornadas no final.

Para finalizar o processo, chamaremos a função sorteiaValores dentro de desenhaflor().

function desenhaflor(){
    posicaoCor, posicao1, posicao2 = sorteiaValores();
    let cor = listaCor[posicaoCor];
    let x = roletax[posicao1];
    let y = roletay[posicao2];

    // restante do código está aqui!
}

Os valores retornados pela função sorteiaValores() serão armazenados, respectivamente, em posicaoCor, posicao1 e posicao2. Os dados contidos nessa variáveis serão o índice para cada lista correspondente: listaCor, roletax e roletay. As variáveis cor, x, e y, armazenarão estes valores e, consequentemente, serão utilizadas para formação das flores!

Agora, múltiplas florzinhas irão aparecer na tela assim que o usuário clicar no botão! Legal, não acha?

Espero que tenha gostado e compreendido minha solução. Sinta-se livre para alterá-la! Aliás, caso ainda tenha alguma dúvida, lembre-se que você pode enviá-la no fórum, ficarei feliz em te ajudar.

Forte abraço, Nicolas!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.

Removendo os parâmetros de desenhaFlor()

Criando uma função que sorteia os valores de posição

Removendo os parâmetros de `desenhaFlor()`