Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Esse código pode ser considerado certo?

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 Estudante
| 138k xp | 3 posts
<canvas width="600" height="400"></canvas>

<script>

  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);
  }

  var tempo = 3000;

  function trocaBandeira() {
    setInterval(desenhaBandeiraAlemanha, tempo);
    setInterval(desenhaBandeiraBrasil, tempo * 2);
  }

  desenhaBandeiraBrasil();
  trocaBandeira();

</script>
2 respostas
por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Lucas, tudo bem?

Bom, eu sou da seguinte opinião:

  • Se o código funciona, ele está certo

O que você procura, pode ser maneiras de deixar ele mais coerente ou mais eficiente.

Eu achei seu código bem limpo e aparentemente está certo (não testei ele). No decorrer dos cursos da Alura você vai descobrindo as melhores práticas. Sugiro continuar seguindo a carreira de programação pra aprender cada vez mais!

Você está no caminho certo!

Se você tiver alguma dúvida ou este código não estiver funcionando, por chamar que a gente te ajuda

solução!
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Lucas, o objetivo deste exercício é fazer com que haja uma troca a cada espaço de tempo entre as duas bandeiras, vamos começar mostrando a bandeira do Brasil e depois de 3 segundos mostraremos a bandeira da Alemanha, passado mais 3 segundos a bandeira do Brasil novamente e assim sucessivamente.

Existem várias maneiras de conseguir o objetivo e seu algoritmo cumpre o que é pedido, portanto ele é válido.O que pode ser otimizado é reduzir o tamanho das funções em funções menores.

Ex:

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

}
function desenhaLosangoAmarelo( ) {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle="yellow";<br>
    pincel.beginPath();<br>
    pincel.moveTo(300, 50);<br>
    pincel.lineTo(50, 200);<br>
    pincel.lineTo(550, 200);<br>
    pincel.fill();<br>
}

E aí na função desenha BandeiraBrasil ficaria melhor de entender o código.

function desenhaBandeiraBrasil() {
desenhaRetanguloVerde()
desenhaLosangoAmarelo( ) 
}

Porém como disse isso seria uma "otimização" o que varia de programador pra programador. Se você não tiver mais nenhuma dúvida a respeito desse exercício você pode marcar uma resposta como solução, finalizando assim esse tópico.Espero ter ajudado. Bons estudos.