Flores Aleatórias, Como impedir sobreposição? e boas praticas... | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

2
respostas

por João Miguel Belletti Belizario

| 54.2k xp | 2 posts

Bom, eu dei uma modificada no código e fiz uma função para gerar as flores aleatoriamente, para a minha surpresa funcionou , porem vez em nunca duas ou três flores se sobrepõe, com posições próximas ou, em raras vezes, com a mesma posição. Como impedir que isso aconteça?

Segunda duvida é, a função floresAleatorias me parece uma macarronada, eu tô com a sensação que deveria dividi-la em umas duas pelo menos, tô certo? E se sim como seria a forma mais adequada?

edit* - a função floresAleatorias também impedem as flores de serem geradas fora do canvas, ou serem cortadas nas bordas.

Seque o codigo:

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

<script>

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

    function numeroAleatorio () {

        return Math.round(Math.random() * 1000);
    }

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

        desenhaCirculo(x, y, raio, "red");
        desenhaCirculo(x, y - (raio * 2), raio, "yellow");
        desenhaCirculo(x, y + (raio * 2), raio, "blue");
        desenhaCirculo(x - (raio * 2), y, raio, "orange");
        desenhaCirculo(x + (raio * 2), y, raio, "black");
    }

    function floresAleatorias (numeroFlores, raio) {

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

        var cordenadas = [];
        var valida = false;

        while (valida == false) {

            var cordenada = numeroAleatorio();

             if (cordenada <= 600 - (raio * 3) && cordenada >= 0 + (raio * 3)) {

                 cordenadas.push(cordenada);
                 break;
             }
        }

        while (valida == false) {

             var cordenada = numeroAleatorio();

             if (cordenada <= 400 - (raio * 3) && cordenada >= 0 + (raio * 3)) {

                 cordenadas.push(cordenada);
                 break;
             }
        }

            desenhaFlor(cordenadas[0], cordenadas[1], raio);
        }

    }

    var raio = 5;

    floresAleatorias(5, raio)
</script>

2 respostas

por Felipe Moreno Borges

| 1130.9k xp | 1471 posts

Instrutor Desenvolvedor Android/iOS

19/09/2019

João, boa tarde!

Uma solução possível para que elas não apareçam uma em cima do outro seria salvar em um array tanto o x quanto o y do centro da flor, e se a nova flor que for gerada estiver perto daquela flor você muda o x e o y dela.

Sobre diminuir a função grande, tem que fazer isso mesmo, a dica para como dividir é: veja linha por linha e tente ver qual é a função daquela linha para o contexto todo e crie uma função para cada conjunto de ação.

Espero ter ajudado e bons estudos!

por João Miguel Belletti Belizario

| 54.2k xp | 2 posts

20/09/2019

Bom, deixe a função mais legível tornando parte dela outra função chamada numeroValido e dei uma alterada na funçãos floresAleatorias.

o codigo ficou assiim:

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

<script>

    function numeroAleatorio (maximo) {

        return Math.floor(Math.random() * maximo);
    }

    function numeroValido (maximo) {

        var numero;

        while (true) {

            numero = numeroAleatorio(maximo)

            if (numero >= ((maximo - maximo) + (raio * 3)) && numero <= (maximo - ( raio * 3))){

                break;
            }
        }

        return numero
    }

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

        desenhaCirculo(x, y, raio, "red");
        desenhaCirculo(x, y - (raio * 2), raio, "yellow");
        desenhaCirculo(x, y + (raio * 2), raio, "blue");
        desenhaCirculo(x - (raio * 2), y, raio, "orange");
        desenhaCirculo(x + (raio * 2), y, raio, "black");
    }

    function floresAleatorias (numeroFlores, raio) {

        var cordenadas = [];

        for (var i = 0; i < (numeroFlores * 2); i += 2) {

            var cordenada;

            cordenada = numeroValido(xMaximo);
            cordenadas.push(cordenada);
            cordenada = numeroValido(yMaximo);
            cordenadas.push(cordenada);

            desenhaFlor(cordenadas[i], cordenadas[i + 1], raio);
        }

        console.log(cordenadas);        
    }

    // Variaveis Globais
    var xMaximo = 600;
    var yMaximo = 400;
    var raio = 7; // Altere para mudar o tamanho dos circulos e das flores

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

    //Execução
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, xMaximo, yMaximo);

    floresAleatorias(5, raio); // Mude o primeiro parametro para definir o numero de flores
</script>

Mas não tenho certeza em como fazer as flores não se sobreporem. A função floresAleatorias agora, gera um arry com todos os x's e os y's, mas não sei oque seria mais correto:

Fazer um função que verifica se o arry é valido(Sem sobreposições), e se não for gera um novo arry, até gerar um valido. OU Uma função que cria um arry e se houver sobreposição ela modifica apenas os valores que tem sobreposição, modificando-os apenas o suficiente para evitar a sobrepposição.

HELP!! já tentei esboçar ambas as ideias mas nada muito solido.