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

Por que meu código não funciona com 2 if's?

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 Fernando Nakamura Ishino
| 107.3k xp | 20 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(550,200);
        pincel.lineTo(300,350);
        pincel.lineTo(50,200);
        pincel.fill();
        pincel.fillStyle='darkblue';
        pincel.beginPath();
        pincel.arc(300,200,100,0,2*Math.PI);
        pincel.fill();    
    }
    function desenhaBandeiraAlemanha(){
        var tela=document.querySelector('canvas');
        var pincel=tela.getContext('2d');
        pincel.fillStyle='black';
        pincel.fillRect(0,0,600,134);
        pincel.fillStyle='red';
        pincel.fillRect(0,134,600,267);
        pincel.fillStyle='yellow';
        pincel.fillRect(0,267,600,400);
    }
    var troca=true;
    function trocaBandeira(){
        if(troca==true){
            desenhaBandeiraBrasil();
            troca=false;
        }
        if(troca==false){
            desenhaBandeiraAlemanha();
            troca=true;
        }
    }
    setInterval(trocaBandeira,1000);


</script>
2 respostas
solução!
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Oi Fernando, tudo bem? Na verdade funciona sim, mas deixa eu te explicar o que tá acontecendo.

A cada segundo o setInterval executa sua função, certo? Mas olha lá, primeiro a variável troca entra como true, ai ele desenha a bandeira do Brasil e você muda ela pra false, logo abaixo você verifica que ela é false e desenha a bandeira da Alemanha e muda ela pra true novamente.

Isso quer dizer que, sim, as duas bandeiras são desenhadas, mas você não consegue ver a bandeira do Brasil por que a da Alemanha é desenhada por cima muito rápido.

Solução? Ao invés de fazer dois ifs, faz um if e um else, que assim a bandeira só será desenhada uma vez a cada segundo. Primeiro desenha a do Brasil, espera um segundo e desenha a da Alemanha. Pegou a ideia?

if(troca==true){
            desenhaBandeiraBrasil();
            troca=false;
          console.log('aiks');
        }else{
            desenhaBandeiraAlemanha();
            troca=true;
          console.log('wow');
        }
por Fernando Nakamura Ishino
| 107.3k xp | 20 posts

Obrigado! Entendi o problema...