como faria pra deixar as bandeiras trocando ifinitamente? deveria usar for/while?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
como faria pra deixar as bandeiras trocando ifinitamente? deveria usar for/while?
Boa tarde Thais, tudo bem?
Utiliza o "while(true)" assim ele ficará definido como verdadeiro e irá alterar infinitamente.
Espero que tenha lhe ajudado :)
tipo assim?
<!-- bandeiras.html -->
<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 mostraBr = true;
function trocaBandeira() {
if(mostraBr == true) {
desenhaBandeiraBrasil();
mostraBr = false;
} else {
desenhaBandeiraAlemanha();
}
}
setInterval(trocaBandeira, 300);
while (true) {
trocaBandeira();
}
</script>Thais, na verdade eu me confundi aqui e fiz alguns testes, não precisa chamar o while, basta setar como true a variavel mostraBr quando ela desenhar da Alemanha, assim entra em um loop infinito.
Segue o código com a alteração, eu também aumentei o tempo de intervalo para ficar melhor na troca das bandeiras
<!-- bandeiras.html -->
<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 mostraBr = true;
function trocaBandeira() {
if(mostraBr == true) {
desenhaBandeiraBrasil();
mostraBr = false;
} else {
desenhaBandeiraAlemanha();
mostraBr = true;
}
}
setInterval(trocaBandeira, 500);
</script>Espero que tenha lhe ajudado :)