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

Por que meu IF não executa ?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Movendo elementos: animações simples e atividade Tudo que vai volta!

por JOHNNY LUIS KAVA
| 27k xp | 3 posts

Bom estou tentando mudar o script da aula em que é feito o movimento de uma bolinha azul porem não estou conseguindo fazer dar certo essa lógica, criei uma variavel bool false e faço ela ficar true com um if, então criei um if para executar uma ação assim que ficasse true a variavel, só que esse if não é executado quando a variavel passa a ser true e se olhar no console ele está true.

Segue o código:

<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function desenhaBolinha(x, y, raio)
    {
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function apagaTela()
    {
        pincel.clearRect(0, 0, 600, 400);
    }

    var x = 20;
    var parou = false;
    function atualizaTela()
    {
        apagaTela();
        desenhaBolinha(x, 20, 10);
        x++;
        if(x >= 580)
        {
            clearInterval(repete);
            //Aqui ele fica true --> parou = true;       
            voltaBolinha(); 
        }
        console.log(x); 
    }

    function voltaBolinha()
    {
        apagaTela();
        desenhaBolinha(x, 20, 10);
        x--;
        if(x <= 20)
        {
            clearInterval(volta);
            console.log("Leu");
        }   
        console.log(x);
    }

    var repete = setInterval(atualizaTela, 10);
    //Esse IF que não executa --> if(parou == true)
    {
        var volta = setInterval(voltaBolinha, 10);
        console.log("leuuu")
    }  
</script>
1 resposta
solução!
por Akashi
| 220.4k xp | 284 posts

Johnny,

seu código na verdade executa:

  • chega a 579;
  • mostra 579 no console;
  • contador chega a 580 e identifica ter chegado a >= 580;
  • chama a function voltaBolinha();
  • faz x-- (x = 579);
  • exibe outro 579 no console;
  • estando em 579 volta a atender à condição da function atualizaTela();
  • trava por conflito;

Se quiser uma solução simples, veja o exemplo do professor, com um simples identificador de sentido de movimento. Mas fiz um código que acho que era o que queria implementar, mas sem chamar o setInterval por fora das funções. Dê uma olhada:

<meta charset="UTF-8">
<canvas width="600" height="40" ></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect (0,0,600,40);

    var volta;
    var ida;

    function desenhaCirculo(x , y, raio) {

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }


    function limpaTela() {
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0,0,600,40);
    }


    function vaiCirculo() {
        limpaTela();
        desenhaCirculo(x,20,10);
        x--;
        if(x <= 10){
            clearInterval(volta);
            ida = setInterval(voltaCirculo, 8);
        }
    }


    function voltaCirculo() {
        limpaTela();
        desenhaCirculo(x,20,10);
        x++;
        if(x >= 590){
            clearInterval(ida);
            volta = setInterval (vaiCirculo, 8);
        }
    }

        var x = 11;
        vaiCirculo();

</script>