duvida button

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!