Porque meu código não funciona? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Tentei usar a mesma base do exercício anterior mas não deu certo, deveria mostras cada bandeira por 3 seg:

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(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() {

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 operador = 1

var contador = 0

function trocaBandeira () {

if (operador < 2) {
 setInterval (desenhaBandeiraBrasil, operador)
 contador = 1
} 
else if (operador >300) {
 setInterval (desenhaBandeiraAlemanha, operador)
 contador = -1
}
operador = operador + contador}

Olá, Amanda! Tudo bom contigo?

Primeiro, podemos chamar o setIntervalfora da função para que ela funcione "globalmente" e não somente dentro da função. Um outro ponto, é que temos que chamar essa função para que as demais funções funcionem.

Então vamos colocar após a função com tempo de três segundosde troca de uma para outra

setInterval(trocaBandeira, 3000);

Feito isso vamos considerar a variável operadorpara que ela seja nosso fator de troca ;-)

var operador = 1

Vamos começar comparando se nosso operador é igual a 1

function trocaBandeira() {
        if (operador == 1) {

Feito isso, já que nosso setIntervalestá sendo invocado fora da função, ele não teria funcionalidade aqui dentro. Então chamamos a função desenhaBandeiraBrasil

function trocaBandeira() {
        if (operador == 1) {
            desenhaBandeiraBrasil();

Agora, ao invés de considerarmos a variável contador, vamos dizer que a variável operadorvai receber ela mais um

function trocaBandeira() {
        if (operador == 1) {
            desenhaBandeiraBrasil();
            operador = operador + 1;

Para enxugarmos, podemos usar operador += 1.

Nesse momento em que o operador não vale mais um e sim dois, vamos fazer com que ele desenhe a bandeira da Alemanha ;-)

Como só existem somente duas opções (é uma bandeira ou outra), um if e elseresolverá

function trocaBandeira() {
        if (operador == 1) {
            desenhaBandeiraBrasil();
            operador += 1;
        } else {

Pois se não for uma condição, será outra!!!

Então, desenhamos a bandeira Alemã

function trocaBandeira() {
        if (operador == 1) {
            desenhaBandeiraBrasil();
            operador += 1;
        } else {
            desenhaBandeiraAlemanha();

Como adicionamos um à variável operador, agora vamos subtrair

function trocaBandeira() {
        if (operador == 1) {
            desenhaBandeiraBrasil();
            operador += 1;
        } else {
            desenhaBandeiraAlemanha();
            operador -= 1;
        }

Para finalizar, o operador = operador + contadorjá não é mais necessário pois utilizamos a cada função desenha.

Essa parte alterada, ficará dessa forma

    var operador = 1

    function trocaBandeira() {
        if (operador == 1) {
            desenhaBandeiraBrasil();
            operador += 1;
        } else {
            desenhaBandeiraAlemanha();
            operador -= 1;
        }
    }

    setInterval(trocaBandeira, 3000);

Acredito que consiga desenvolver outras formas também, Amanda, mas acredito que conseguimos chegar no resultado esperado!

Espero ter ajudado!

Um abraço e bons estudos!!!

Chegou a hora de transformar