Fiz o codigo utilizando IF no lugar do Else mas não funciona | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

2
respostas

por Daniela Bertoglio

| 45.5k xp | 6 posts

Fiz o código porém no lugar do "else" utilizei o "if (desenha == false)..." e desta forma o código não roda entretanto não consegui entender o motivo pra não dar certo.

<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 desenha = true;

function atualizaTela(){


    if(desenha){

        desenhaBandeiraBrasil();
        desenha = false;
    } 


    if (desenha == false){

        desenhaBandeiraAlemanha();
        desenha = true;
    }

}



setInterval(atualizaTela, 300);
</script>

2 respostas

por Luiz Gustavo Andrade dos Santos

| 219.4k xp | 158 posts

10/08/2020

Você deve usar um else mesmo. O motivo é desenha = false; após desenhaBandeiraBrasil()

por Estudante

| 583.5k xp | 188 posts

16/08/2020

Daniela,

Como o Luiz disse, o problema está no desenha = false do primeiro if.

O que acontece é que aqui você seta o desenha para false:

    if(desenha){
        desenhaBandeiraBrasil();
        desenha = false;
    }

E logo em seguida já testa de novo (e o desenha é false, então executa o conteúdo do IF):

    if (desenha == false){
        desenhaBandeiraAlemanha();
        desenha = true;
    }

Como é muito rápido você nem chega a enxergar a bandeira do Brasil desenhada, ela já é sobreposta pela da Alemanha.

Por isso deixar com "else" é uma solução. Só vai testar de novo no próximo intervalo.

Mas não é a única solução. Você pode usar os dois IF, desde que altere a variável depois dos testes. Como é booleano você pode simplesmente atribuir a negação dele:

if(desenha){    // se desenha é true executa aqui
   desenhaBandeiraBrasil();
} 
if (!desenha){   // se desenha é false a negação vai tornar true e executa aqui
   desenhaBandeiraAlemanha();
}
// se desenha chega como true atribuímos a ele sua negação, ou seja, false. E vice-versa.
desenha = !desenha;