Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

DÚVIDA

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 O pulso ainda pulsa ...

por Thiago Ribeiro de Souza Melo
| 46.6k xp | 65 posts

Eu não entendi porque ele não pulsou. Vocês poderiam me ajudar? O erro que apresenta é de que o raio está negativo, ai ele não lê, mas não encontrei razões para o raio ficar negativo. Por favor, ajudem-me! 

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

<script>

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

    function desenhaCirculo(x, y, raio, cor) {

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

    function limpaTela() {

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

    function incrementaCirculo() {

        limpaTela();
        desenhaCirculo(300, 200, raio, "red");
        raio++;

        if(raio > 30) {

            setInterval(diminuiCirculo, 20);
        }

    }

    function diminuiCirculo(){

        limpaTela();
        desenhaCirculo(300, 200, raio, "red");
        raio = raio - 1;

        if (raio < 20) {

            setInterval (incrementaCirculo, 20);

        }
    }

    setInterval(incrementaCirculo, 20);

</script>
2 respostas
solução!
por Geovani Granieri
| 909.1k xp | 1038 posts
Instrutor

Olá Thiago, tudo bem?

Essa sua solução é bem comum, entretanto tem alguns problemas, e o principal é que estamos colocando diversos cronômetros que nunca acabam e que estão alterando a variável ao mesmo tempo em valores diferentes, então por exemplo, chega um momento que temos 30 setIntervals diminuindo o raio em 1, e o resultado é que ele acaba se tornando negativo mesmo tendo o condicional

Para testar isso, ao invés de acrescentar em 1, você pode acrescentar 0.5 ou 0.1 que já irá perceber, o segundo ponto, você deve ter notado, é que essa solução pesa muito a página pois estamos sempre adicionando e nunca removendo, então chega um momento que o navegador irá travar

Mas, dado que você foi por essa lógica, tem um maneira bem simples de "consertar" e ter o efeito correto, para isso precisamos no começo definir o nosso cronometro:

var interval = null;

E iremos inicializar naquele primeiro setInterval

    interval = setInterval(incrementaCirculo, 20);

Agora o processo terá apenas 1 passo a mais, antes de eu criar um novo setInterval para diminuir ou aumentar, eu irei destruir o antigo, com a função clearInterval 

        if(raio > 30) {
            clearInterval(interval);
            interval = setInterval(diminuiCirculo, 20);
        }
        if (raio < 20) {
            clearInterval(interval);
            interval = setInterval (incrementaCirculo, 20);
        }

E agora não teremos mais o problema de se tornar negativo, pois em nenhum momento criamos mais do que um intervalo rodando, dado que estamos sempre destruindo quando chega no limite :)

Conseguiu Compreender? Qualquer coisa estou à disposição!

Abraços e Bons Estudos :)

por Thiago Ribeiro de Souza Melo
| 46.6k xp | 65 posts

Muito obrigado! Entendi Perfeitamente.