Entrar Ainda não tem acesso?
3
respostas

Estou fazendo em partes mas esbarrei no IF

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Trocando de cor

por Vitor Camargo Bazzani
| 48k xp | 20 posts
<canvas width="600px" height="400px"></canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

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



    var cores = ['pink', 'blue','green'];
    var indice = 0;


    function criarCirculos(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        pincel.fillStyle = cores[indice];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2 * 3.14);
        pincel.fill();



    }

    function mudarCor(){

        indice++;
        alert(indice);
    }

   if(indice >=3){
    alert("limite de cores!");

   } 


tela.onclick = criarCirculos;
tela.oncontextmenu = mudarCor;
console.log(indice);

</script>

As cores estão mudando corretamente, mas na hora de manipular o "IF" para futuramente adicionar o sistema de não deixar passar do indice 2, ai o if não cai no true nunca. Alguem pode dar uma luz por favor ?

3 respostas
por Vitor Camargo Bazzani
| 48k xp | 20 posts

no console, o indice parece não sair do 0 também.

por Vitor Camargo Bazzani
| 48k xp | 20 posts

Foi falta de atanção minha, o if tem que estar dentro da função para dar certo ! :D

por Murilo Teixeira da Silva Santos
| 104k xp | 20 posts
Bolsista

O seu ifestá fora da sua função. Quando carregar a página o interpretador JS vai passar diretamente por esse if (a condição é falsa nesse instante) e não vai mais voltar nele outra vez.

var indice = 0; // 0 não é maior nem igual 3 ---> indice>=3 é false

if(indice >=3){
    // bloco não vai ser executado, pois a condição é falsa
    alert("limite de cores!");

}

Para a verificar o valor do índice no momento do click, o correto é que esse bloco if fique dentro da função mudaCor()

function mudarCor(){

    indice++;
    if(indice >=3){
        alert("limite de cores!");
        //seu bloco de código para resolver a situação
    } else {
        alert(indice);
    }
}

Edit: Desculpe, eu não vi que você já tinha resolvido o problema.