Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Animação Bolinha

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 Animações simples

por Júlia Amaral e Silva
| 54.5k xp | 56 posts

Oi, gente!

Eu refiz o código passado pelo professor e, para fins didáticos, resolvi criar uma outra bolinha só que vermelha.

<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 desenhaCirculo2 (a, y, raio) {

        pincel.fillStyle = 'red';
        pincel.beginPath();
        pincel.arc (a, 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 a = 20;

    function atualizaTela2 () {

        limpaTela();
        desenhaCirculo2 (a, 300, 10);
        a++;
    }

    setInterval (atualizaTela, 11);
    setInterval (atualizaTela2, 10);

</script>

Minha dúvida é: por qual motivo as duas bolinhas não aparecem quando o intervalo de tempo é igual, sendo que eu variei o y?

Obs.: no código que postei, eu alterei o intervalo entre elas só para mostrar que o código está funcionando.

2 respostas
por Monalisa Meyrelle de Sousa Silva
| 1984.4k xp | 4418 posts
Alura Scuba Team Monitoria Fórum Ops

Olá, Júlia, tudo bem?

Analisei o seu código e identifiquei qual trecho está gerando esse comportamento no seu programa.

Note que ao criar duas funções com objetivos de atualizar a tela, você utiliza a função limpaTela(), com isso, a função irá limpar a tela ao ser chamada na função atualizaTela, mas irá limpar também ao ser chamada na função atualizaTela2, gerando um conflito.

Para solucionar esse problema você poderá criar apenas uma função atualizaTela chamando a função limpaTela apenas uma vez, e em seguida, desenhando os dois círculos.

O código ficará assim:

<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 desenhaCirculo2 (a, y, raio) {

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


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



    var x = 20;
    var a = 20;

    function atualizaTela() {

        limpaTela();
        desenhaCirculo (x, 20, 10);
        x++;
        desenhaCirculo2 (a, 300, 10);
        a++;
    }



    setInterval (atualizaTela, 10);

</script>

Repare que o código ficou mais "limpo", necessitando chamar a função setInterval apenas uma vez.

Espero ter ajudado.

Caso surjam dúvidas, estou à disposição.

Grande abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Wellington Beraldo
| 188.2k xp | 413 posts
Analista de Logística

Muito bom Júlia! Fiz a mesma coisa colocando 6 circulos com cores diferentes =D Vamos pra cima! Bons estudos!