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

Trocando bandeiras não funciona

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por CRISTIANO FERREIRA DA SILVA
| 166.5k xp | 223 posts
Empacotador

Meu código não roda, fica parado na bandeira do Brasil, alguém poderia me ajudar por favor!

Agradecido

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

<script>



    var mostraBrasil = true;

    function trocaBandeira() {

        if (mostraBrasil) {

            desenhaBandeiraBrasil();

        } else {

            desenhaBandeiraAlemanha();

            mostraBrasil = !mostraBrasil;

        }

    }

    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(trocaBandeira, 3000);


</script>
2 respostas
solução!
por Lara Fernanda Simmer Barbosa
| 87k xp | 27 posts
Scrum Master

Boa tarde, Cristiano! Tudo certo?

Eu também estou aprendendo, assim como você, mas acho que posso te ajudar.

O problema está na função trocaBandeira. Neste trecho do seu código:

var mostraBrasil = true;

    function trocaBandeira() {

        if (mostraBrasil) {

            desenhaBandeiraBrasil();

        } else {

            desenhaBandeiraAlemanha();

            mostraBrasil = !mostraBrasil;

        }

    }

Note que a variável mostraBrasil começa como "true". Prosseguindo, a função fala que: se a variável mostraBrasil for true, a bandeira do Brasil será desenhada. Porém, não tem nenhum gatilho alterando o valor desta variável para false, para assim desenhar a bandeira da Alemanha.

Então, depois de desenhada a bandeira do Brasil, a variável mostraBrasil deve ser reatribuída como "false", pois só se ela estiver "false" a função desenhaBandeiraAlemanha() será chamada.

Segue abaixo este trecho do meu código, que funcionou certinho:

var mostraBrasil = true;

function trocaBandeira() {
    if (mostraBrasil == true) {
        desenhaBandeiraBrasil();
        mostraBrasil = false;
    } else if (mostraBrasil == false) {
        desenhaBandeiraAlemanha();
        mostraBrasil = true;
    }
}

Espero ter ajudado! =)

por CRISTIANO FERREIRA DA SILVA
| 166.5k xp | 223 posts
Empacotador

Olá Lara! Tudo bem? Esepro que sim.

Muito obrigado pela ajuda, até mais e bons estudos.