Entrar Ainda não tem acesso?
1
resposta

Criei uma outra função, mas não deu certo

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 Estudante
| 15.3k xp | 6 posts

Olá! Eu tentei criar uma outra função que fizesse a volta da bolinha, depois uma função que juntasse a ida e a volta. Porém, na hora que eu fiz o setInterval da função, a bolinha só voltou. Não consegui identificar o problema.

<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 atualizaTela(){
        limpaTela();
         desenhaCirculo(x, 20, 10);         
         x++;
    }

    var z = 600;
    function atualizaTelaVolta(){
         limpaTela();
         desenhaCirculo(z, 20, 10);         
         z = z - 1;
    }

    function vaiVolta(){
        atualizaTela();
        atualizaTelaVolta();
    }

    setInterval(vaiVolta, 10);

</script>
1 resposta
por Samir Hamade Rocha
| 121.5k xp | 67 posts
Analista de Sistemas

Oi, tudo bem?

Usando a sua estrutura de código eu consegui resolver da seguinte maneira:

<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 atualizaTela(){
        limpaTela();
        desenhaCirculo(x, 20, 10);         
        //x++;
    }

    var z = 600;
    function atualizaTelaVolta(){
         limpaTela();
         desenhaCirculo(z, 20, 10);         
         //z = z - 1;
    }

    function vaiVolta(){
        if(x < 600) {
            atualizaTela();
            x++;
        } else if(z > 0) {
            atualizaTelaVolta();
            z--;
        } else if(x >= 600) {
            x = 20;
            z = 600;
        } 
    }

    setInterval(vaiVolta, 1);

</script>