Entrar Ainda não tem acesso?
3
respostas

programa funciona a partir do debug chrome, mas não a partir da função setInterval

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 Wagner Ricardo Alves dos Santos
| 119.2k xp | 98 posts

Boa noite elaborei um programa da bolinha vai e vem.. entretanto utilizando o debug " funciona" eu vejo a bolinha indo para a esquerda e para a direita . Mas quando usa-se a função setInterval tem um comportamento estranho . Como se retorna-se rapidamente para esquerda até a posição 0,0 e depois para a direita da forma prevista. Utilizei tudo o que consegui absorver desse curso para resolver o problema...mas acho que tenho muito o que aprender ainda. Alguém pode me dizer o que está ocorrendo? Segue o programa não é tao elegante e simples .. foi o que consegui fazer

3 respostas
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa tarde. Wagner! Como vai?

Ficou só faltando o código. Vc poderia mandar o código que vc desenvolveu, por favor? Quando for postar o código, utilize o botão "inserir código" e cole-o no lugar indicado para que ele seja postado corretamente.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

por Wagner Ricardo Alves dos Santos
| 119.2k xp | 98 posts

Boa noite professor Gabriel ainda bem que mencionou o inserir código, estou me adaptando aos recursos da plataforma segue o codigo

insira seu código aqui

por Wagner Ricardo Alves dos Santos
| 119.2k xp | 98 posts
<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = "grey";
    pincel.fillRect(0, 0, 600, 400);

    function limpaTela(){
        pincel.clearRect(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();
    }

    var ativavolta = false;


    function voltaBolinha(){
        x = 0;
        if(ativavolta){
            var posx = 20;
            while(posx > 0 ){
                desenhaCirculo( posx , 20 , 10)
                limpaTela();
                posx--;
            } 

        }
        if( posx == 0){
            ativavolta = false;
            return;
        }
    }


    var x = 0;
    function atualizaTela(){

        if( !ativavolta){ 

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

        } 
        if(x >= 20){
            ativavolta = true;
            voltaBolinha();

        }

    }

    setInterval(atualizaTela,10);
</script>