campo de flores amarelas - é possível com um único loop? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Michelle

| 484.8k xp | 17 posts

Eu quis criar duas flores de cores e posicionamento diferentes e para isso utilizei dois loops, deu certo! Queria saber se é possivel chegar nesse mesmo resultado com um unico loop...quebrei a cabeça e não consegui

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>

</head>
    <body>
        <canvas width   ="600" height="500"></canvas>

        <script>

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

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

                function desenharFlor(x, y) {
                    desenharCirculo(x-15, y, 10, 'orange');
                    desenharCirculo(x+15, y, 10, 'orange');
                    desenharCirculo(x, y-15, 10, 'orange');
                    desenharCirculo(x, y+15, 10, 'orange');
                    desenharCirculo(x, y, 10, 'gold');
                }

                for (var x=60; x < 600; x += 120){
                    for (var y=60; y < 500; y += 120 ){
                        desenharFlor(x, y);

                    }

                }


                function desenharFlorMeio(x,y) {
                    desenharCirculo(x-15, y, 10, 'gold');
                    desenharCirculo(x+15, y, 10, 'gold');
                    desenharCirculo(x, y-15, 10, 'gold');
                    desenharCirculo(x, y+15, 10, 'gold');
                    desenharCirculo(x, y,  10, 'orange');
                }

                for (var x=60; x < 300; x += 60){
                    for (var y=60; y < 200; y += 60 ){
                        desenharFlorMeio(x*2, y*2);

                    }

                }

        </script>



    </body>
</html>

2 respostas

por João Manoel Lima

| 373.4k xp | 429 posts

Alura Scuba Team

15/09/2021

Boa noite Michelle, tudo certo?

Eu adoreeei o seu projeto! As flores e o arranjo delas ficaram lindas. Parabéns!

Que ótima pergunta! Não só é possível, como também existe outra alteração para deixar um código mais reutilizável:

Você pode utilizar apenas um laço e chamar a desenhaFlor com as coordenadas (x,y) e chamar a desenhaFlorMeio com as coordenadas mais para a direita e mais para baixo, ou seja, algo como (x+60, y+60). O códico ficaria mais ou menos assim:

for (var x=60; x < 600; x += 120){
    for (var y=60; y < 500; y += 120 ){
        desenharFlor(x, y);
        desenharFlorMeio(x + 60, y + 60);
    }
}

Mas dessa forma algumas flores são "cortadas" e ficam aparecendo parcialmente. Vou deixar como um desafio para você fazer com que isso não aconteça, beleza?

Outra coisa que podemos fazer é passar como parâmetros da função quais são as cores utilizadas, ou seja, podemos deixar a função assim:

function desenharFlor(x, y, corMeio, corPetala) {
    desenharCirculo(x-15, y, 10, corPetala);
    desenharCirculo(x+15, y, 10, corPetala);
    desenharCirculo(x, y-15, 10, corPetala);
    desenharCirculo(x, y+15, 10, corPetala);
    desenharCirculo(x, y, 10, corMeio);
}

e chamar a função assim:

desenharFlor(x, y, 'gold', 'orange');

Concorda comigo que fica melhor? Dessa forma temos uma única função que deixa super fácil a troca de cores! Depois se você topar o desafio adoraria ver uma variação do projeto que desenha várias flores super coloridas.

Espero ter ajudado. Desejo muito sucesso nos seus estudos!

solução!

por Michelle

| 484.8k xp | 17 posts

05/10/2022

Oooie! Na época segui seu desafio e para cores aleatórias mas ainda bonitas, adicionei essas linhas de código!

var cores = ["#ffd700", "#ffa500", "#FF5F00", "#FD0048","#73d2de", "#0087A7", "#5517E5", "#A400AF", "#c77dff", "#5a189a"];


            function randomColor(cores){
                return cores[Math.floor(Math.random()*cores.length)];

            }

            var corAleatoriaPetala = randomColor(cores);
            var corAleatoriaMeio = randomColor(cores);

            while (corAleatoriaPetala == corAleatoriaMeio) {
                corAleatoriaMeio = cores[Math.floor(Math.random()*cores.length)]
            }

            console.log(corAleatoriaPetala);
            console.log(corAleatoriaMeio);


            for (var x=60; x < 600; x += 120){
                for (var y=60; y < 500; y += 120 ) {
                    desenharFlor(x, y, corAleatoriaMeio, corAleatoriaPetala);

                    if(x < 500 && y < 420){

                        desenharFlorMeio(x+60, y+60, corAleatoriaPetala, corAleatoriaMeio);
                    }    

                }
            }

Mergulhe em programação