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

minha ideia parece ser boa , mas não consigo fazê -la funcionar

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

não é tão elegante com relação aos demais mas não consegui entender o erro segue o código. sem alguem puder me ajudar eu agradeço.

<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, 0, 2 * Math.PI);
        pincel.fill();
    }

    var ativavolta = false;

    function voltaBolinha(){
        var posx = 600; 

        if(ativavolta){
            limpaTela();
            desenhaCirculo(posx, 20 , 10)
            posx--;
        }else if( posx == 20){
            ativavolta = false;
        }
    }


    var x = 20;
    function atualizaTela(){

        if( !ativavolta){ 
            limpaTela();
            desenhaCirculo(x, 20, 10);
        x++;

        }else if(x == 600){
            ativavolta = true;
            voltaBolinha();
        }

    }

    setInterval(atualizaTela,10);
</script>
4 respostas
por Instrutor
| 1131.4k xp | 1471 posts
Instrutor

Wagner, boa tarde!

A lógica está certa! Caso você abra o seu navegador (geralmente teclando F12) e ir na aba de console, você vai ver que está gerando um erro, na linha 17, ele diz que você não está passando um parâmetro. Indo nessa linha:

pincel.arc(x, y, 0, 2 * Math.PI);

Olhando a documentação está faltando passar um raio. Alterei pra ficar assim:

pincel.arc(x, y, 5,0, 2 * Math.PI);

E deu certo!

Documentação: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

Espero ter ajudado e bons estudos

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

Oi Felipe agradeço a ajuda mas ainda não Deu certo? acho que não a bolinha não esta voltado.. a bolinha anda para a direita e não volta conforme pensei.

solução!
por Instrutor
| 1131.4k xp | 1471 posts
Instrutor

Wagner, boa tarde!

Você estava indo num caminho lógico muito bom! O que faltou era mudar a direção da bolinha veja o que eu fiz:

var direcaoX = 1;
  function atualizaTela(){
        if (x >=600 || x<=0) { // Verifica se a bolinha está em uma das extemidades da tela
            direcaoX = direcaoX * -1; //Se tiver, altera a direção simplesmente multiplicando o x por um número negativo, que vai dar o próprio número só que com o sinal contrário
        }
        x = x + direcaoX; //Soma o x com a nova direção do x que só vai ser +1 ou -1 sempre
        limpaTela();
        desenhaCirculo(x, 20, 10);
    }

E nesse caso você pode remover a funçã voltaBolinha()

Espero ter ajudado e bons estudos!

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

Grato garoto.. eu passei próximo entendi o que faltava... eu estava decrementando os valores ou invés de torna-los negativos poxa.. boa solução.