Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Trocando Bandeiras

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

por Estudante
| 45.4k xp | 11 posts

Boa noite!

Criei e testei uma programação para intercalar entre as bandeiras do Brasil e da Alemanha que até que deu certo. Mas não usei a variável booleana, conforme a orientação do instrutor. Gostaria se ainda sim o código está correto e faz sentido e, caso não faça sentido, quais são os erros que poderiam surgir caso escreva um código maior.

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

<script>

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


    function desenhaBandeiraBrasil() {

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

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

        pincel.fillStyle = 'darkblue'
        pincel.beginPath();
        pincel.arc(300, 200, 100, 0, 2*Math.PI);
        pincel.fill();
    }

    function desenhaBandeiraAlemanha() {

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

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    function trocaBandeira(tempo) {

        var tempo = 3000;

        setInterval(desenhaBandeiraBrasil, tempo);

        limpaTela();

        setInterval(desenhaBandeiraAlemanha, tempo + 3000);

        limpaTela();
    }

    trocaBandeira();

</script>
1 resposta
solução!
por TIAGO DOMINGOS CIPRIANO
| 57.4k xp | 3 posts

Olá Lilian, a lógica está funcionando e faz sentido, o que acontece é que você pode ir buscando mais formas de fazer a mesma coisa (você disse que mudou um pouco como o instrutor fez, isso é ótimo para o seu aprendizado). Uma dica, seria tentar evitar repetir código, no seu caso você precisou chamar a setInterval e o limpaTela 2x.

Eu encontrei um exemplo de código usando uma técnica chama recursividade, que neste exemplo poderia ajudar um pouco (deve existir outras formas de fazer, como disse, é só mais um exemplo para você adicionar ao seu repertório)

//esse parâmetro vai definir qual das funções vamos chamar e quanto tempo deve permanecer a bandeia
function trocaBandeira(chaveador, tempo){

    // aqui eu troquei o setInterval pelo setTimeout e estou pasando uma função anonima como parameto
    setTimeout(function(){

        /*
            O boleano de certa forma acabou aparecendo aqui como resultado da
            da verifição do chaveador, por outro lado ajudou a evita código duplicado
        */
        if (chaveador==0){
            desenharBandeira = desenhaBandeiraAlemanha

            //aqui preparamos para que na proima chamada seja outra bandeira
            chave =1
        }else{
            desenharBandeira = desenhaBandeiraBrasil
            chave = 0
        }


        desenharBandeira()
        limpaTela();

        //Essa é a chamada recursiva
        trocaBandeira(chave, tempo);
    }, tempo);

}

trocaBandeira(0, 3000)