Entrar Ainda não tem acesso?
10
respostas

Minha solução mais prática

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Movendo elementos: animações simples e atividade Trocando bandeiras

por Diógenes Bahia Bezerra
| 124.5k xp | 130 posts

A minha solução foi simples, mas funcionou para esse problema em específico.

Sei que fazer códigos e criar lógicas é bom para treinar, mas tbm ser simples também é bom.

Espero ter ajudado. Sucesso na sua jornada!!

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

<script>

function LimparTela(){
    pincel.clearRect(0,0,600,400);
}

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

    pincel.fillStyle="green";
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle="yellow";
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.fillStyle="darkblue";
    pincel.beginPath();

    pincel.arc(300, 200, 100, 0, 2* 3.14);
    pincel.fill();
}


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

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 133);

    pincel.fillStyle = 'red';
    pincel.fillRect(0, 133, 600, 133);

    pincel.fillStyle = 'yellow';
    pincel.fillRect(0, 266, 600, 133);
}

    setInterval(desenhaBandeiraBrasil,3000);
    setInterval(desenhaBandeiraAlemanha,6000);

</script>
10 respostas
por Edson Luiz Lima Dos Santos
| 201k xp | 121 posts
Desenvolvedor de Sites Wordpress e Suporte

Diógenes Bahia Bezerra , legal sua solução é bem simples mesmo e gostei muito e até estou testando no PC.

Mais pensando como desenvolvedor ou pelo menos tentando em termos de recursos usados no computador será que fazendo nesse formato não usaríamos mais recursos do sistema do que realmente precisaríamos?

Desde que comecei a estudar programação apreendi que o desenvolvedor tem que ir além do código e pensar até nesses detalhes, deixando ativo o tempo todo o setInterval das duas funções, isso em um sistema simples como esse beleza, mas se pensarmos usando a lógica, ter uma função que consiga gerenciar o recurso deixaria mais otimizado o uso dos recursos de hardware.

Acredito que a ideia do exercício é justamente treinar nossa lógica e da essas dicas de simplicidade que você comentou mas ao mesmo tempo mostrar esses detalhes de trabalhar as funções para fazer essa gestão de recurso.

Estou aberto a trocarmos uma ideia, pois aqui só estou comentando meu ponto de vista não posso afirma que é isso mesmo.

por carlos ferreira de sousa
| 40.6k xp | 59 posts

oi Diogenes td bem, achei bem prático sua solução, mas eu não entendi porque o setinterval da Alemanha é 6000,

por Edson Luiz Lima Dos Santos
| 201k xp | 121 posts
Desenvolvedor de Sites Wordpress e Suporte

Carlos, o setInterval da Alemanha sendo maior ele executa por mais tempo que o do Brasil no caso 3 segundos a mais e assim quando termina o tempo dos 3 segundos do Brasil, o da Alemanha ainda esta correndo e por isso ele é apresentado, se fosse igual um iria ficar por cima do outro aonde somente 1 iria aparecer.

por carlos ferreira de sousa
| 40.6k xp | 59 posts

obrigado Edson , como estou aprendendo ainda surge algumas duvidas mas pelo que eu entendi, a bandeira da alemanha não sai da tela, e apos os 6 segundos oque acontece é que a bandeira do Brasil aparece junto com a da alemanha mas a do brasil fica por cima da alemanha por 3 segundos e a bandeira do brasil só volta após terminar o ciclo da bandeira da alemanha assim se a bandeira da alemanha ficar 10 segundos a bandeira do brasil só volta apos os dez segundos , no caso as bandeiras aparecem a cada 3 segundos porque a bandeira da alemanha vai ate 6

por Edson Luiz Lima Dos Santos
| 201k xp | 121 posts
Desenvolvedor de Sites Wordpress e Suporte

Carlos, em resumo é basicamente isso.

por Diógenes Bahia Bezerra
| 124.5k xp | 130 posts

Tudo bom, Edson?

A atividade era: alternar as bandeiras a cada 3 segundos e não falava mais nada.

No código professor, ele chama setInterval e faz a bandeira do Brasil e 3 segundos depois chama setInterval e faz a bandeira da Alemanha. O meu faz o mesmo. Só que eu criei 2 setInterval que vão ser chamados a cada 3 segundos de forma intercalada.

Então, tanto o meu código, como o do professor, vamos fazer com que as bandeiras aparecem a cada 3 segundos enquanto foram executados os códigos.

Essas poucas linhas de códigos nem exigem tanto do sistema, mas eu creio que o meu está ainda mais simples , pois o meu exige menos do sistema que o código do professor. Vamos dizer assim, a minha lógica está mais fácil.

Claro, tu isso é minha opinião. rs

Espero ter ajudado. Sucesso na sua jornada!!

por Diógenes Bahia Bezerra
| 124.5k xp | 130 posts

Tudo bom, Carlos?

Entendi o questionamento.

Então eu irei chamar as funções na seguinte ordem:

setInterval(desenhaBandeiraBrasil,3000); // é executada a cada 3 segundos.

setInterval(desenhaBandeiraAlemanha,6000); // é executada a cada 6 segundos.

Então será executado nessa ordem:

1 segundo - não faz nada

2 segundos - não faz nada

3 segundos - Desenha a bandeira do Brasil

4 segundos - a bandeira do Brasil fica sendo exibida

5 segundos - a bandeira do Brasil fica sendo exibida

6 segundos - Desenha de novo a bandeira do Brasil e dentro do MESMO SEGUNDO é desenhada a bandeira da Alemanha por cima do Brasil

7 segundos - a bandeira da Alemanha fica sendo exibida por cima do Brasil, que continua desenhada por trás.

8 segundos - a bandeira da Alemanha fica sendo exibida por cima do Brasil, que continua desenhada por trás.

9 segundos - Desenha a bandeira do Brasil por cima da Alemanha.

10 segundos - a bandeira do Brasil fica sendo exibida por cima da Alemanha, que continua desenhada por trás.

11 segundos - a bandeira do Brasil fica sendo exibida por cima da Alemanha, que continua desenhada por trás.

12 segundos - Desenha de novo a bandeira do Brasil e dentro do MESMO SEGUNDO é desenhada a bandeira da Alemanha por cima do Brasil.

13 segundos - a bandeira da Alemanha fica sendo exibida por cima do Brasil, que continua desenhada por trás.

E assim segue.

Tem a alternância pq a cada 3 segundos é desenhado só a do Brasil, mas quando chega nos múltiplos de 6 é desenhada a do Brasil (pq é o primeiro código escrito, mas milissegundo depois é desenhada a bandeira da Alemanha (código escrito depois) e fica sendo exibida até a ser desenhada a bandeira do Brasil de novo.

Como eu falei para o Edson, tanto o meu código como o código do professo vamos ficar desenhando bandeiras em cima de bandeiras.

Espero ter ajudado. Sucesso na sua jornada!!

por carlos ferreira de sousa
| 40.6k xp | 59 posts

exatamente

por Edson Luiz Lima Dos Santos
| 201k xp | 121 posts
Desenvolvedor de Sites Wordpress e Suporte

Show a explicação Diógenes, estava acompanhando outro tópico de outro colega e vi lá suas explicações, passa uma visão bacana e aprendi muito.

por Diógenes Bahia Bezerra
| 124.5k xp | 130 posts

Bom dia, Carlos e Edson!

Fico feliz que eu pude ajudar.

É um bom treino tentar passar algo que você também está aprendendo. Para isso eu primeiro tenho que entender a lógica do que estou estudando para depois eu pensar de forma lógica como irie explicar isso.

É uma forma de aprender e ajudar. rs

Abraço.

Sucesso na jornada de vocês!!