0
respostas

ACELERAÇÃO INFINITA DA BOLINHA E RESOLUCÃO PALIATIVA , NÃO SEI A CAUSA.(CUIDADO)

Me deparei com essa situação enquanto tentava resolver a atividade: A cada tocada na borda a velocidade da bolinha dobrava sem limites. (CUIDADO FECHE A PÁGINA RAPIDO)

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

<script>

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

    function desenhaCirculo(x, y, raio) {

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

    function limpaTela() {

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

    var x = 20;



    function volta()
    {
         limpaTela();
        desenhaCirculo(x, 20, 10);
        x-- 
    }


    function vai() {

        limpaTela();
        desenhaCirculo(x, 20, 10);
        x++

        if(x>590)
        {
            setInterval(volta,10)

        }
        if(x<10)
        {
            setInterval(vai, 10);

        }
    }

    setInterval(vai, 10);



</script>

De qualquer forma concertei o código adicionando:

 if(x>590)
        {
            setInterval(volta,1)
            x=590
        }
        if(x<10)
        {
            setInterval(vai,1);
            x=10
        }

ficando:

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

<script>

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

    function desenhaCirculo(x, y, raio) {

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

    function limpaTela() {

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

    var x = 20;



    function volta()
    {
         limpaTela();
        desenhaCirculo(x, 20, 10);
        x-- 
    }


    function vai() {

        limpaTela();
        desenhaCirculo(x, 20, 10);
        x++

        if(x>590)
        {
            setInterval(volta,1)
            x=590
        }
        if(x<10)
        {
            setInterval(vai,1);
            x=10
        }
    }

    setInterval(vai, 1);



</script>

Desconfiei que na verdade o tamanho da coordenada x esta se diminuindo a cada toque de borda ou que esse ultimo setInterval esteja comprometendo o loop. Não consigo afirmar oque realmente deu a aceleração repentina, mas ai está um possível SOLUÇÃO PALIATIVA. Paliativa ,pois quanto mais tempo passa mais o código apresenta problemas com a movimentação da bolinha. Quem souber do real motivo compartilhe seu conhecimento conosco :).