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

Como eu faço pra bolinha parar quando ela chegar em determinado ponto?

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 Cristiano Santos
| 151.1k xp | 23 posts

Depois de algumas pesquisas, aprendi a parar o setInterval usando o clearInterval. Consigo parar a bolinha com um clique na tela, e criei uma função para chamar o clearInterval. Porém, eu gostaria de saber se há alguma forma de fazer a bolinha parar automaticamente quando ela chegar em determinado ponto da tela, sem precisar que eu clique.

Segue o meu código abaixo, com a função pararInterval, que faz a bolinha parar com um clique:

<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 interval = setInterval(atualizaTela, 10);

    function pararInterval() {
        clearInterval(interval);
    }

    tela.onclick = pararInterval; //a bolinha vai parar quando clicarmos na tela

</script>
2 respostas
solução!
por Estudante
| 389.9k xp | 241 posts

Olá, Cristiano, você fez um ótimo trabalho!

Considerando a largura da tela (600), eu apenas complementei o seu código assim:

    function atualizaTela() {

        limpaTela();
        desenhaCirculo(x, 20, 10);
        x++; 
        if(x > 590){
           pararInterval(); 
        }

    }

Segue o código completo:

<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++; 
        if(x > 590){
           pararInterval(); 
        }

    }

    var interval = setInterval(atualizaTela, 10);

    function pararInterval() {
        clearInterval(interval);
    }

    atualizaTela();

</script>

Agora, a bolinha para automaticamente.

Espero ter contribuído. Bons estudos!

por Cristiano Santos
| 151.1k xp | 23 posts

Obrigado pela resposta e pela ajuda, era exatamente isso que eu queria fazer e entendi a sua explicação! Fiz alguns testes, antes de postar a dúvida, mas errei na lógica e na posição do if.