Entrar Ainda não tem acesso?
3
respostas

Animação bolinha lógica de programação II

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 Eduardo Antonio Brigato
| 48.6k xp | 1 posts
Gerente Geral

O exercício pede para quando a bolinha chegar ao final do canvas voltar ao incio e ficar assim infinitamente, coloquei um if que se x == 600 , deixar o x = 20, porém quando coloquei na opinião do instrutor, o código era bem mais complexo gostaria de saber se o meu está certo ?

<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 == 600){
              x = 20;
          }

    }

    setInterval(atualizaTela, 10);

</script>
3 respostas
por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

Funcionou o código?

por Danilo
| 37.1k xp | 2 posts

Como foi dito, existem várias formas de se chegar no mesmo resultado, fiz semelhante ao seu, o importante é chegar ao mesmo resultado.

por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Eduardo a diferença da sua animação é que ela só tem um sentido, ela chega na direita e volta do começo nela da impressão que ela saiu pela direita e entrou pela esquerda, a implementação do instrutor é que quando ela chegue a direita ela volta da direita pra esquerda ou seja mude de sentido, para fazer isso você deverá detectar a colisão da bolinha com as extremidades e dependendo de qual for, incrementar ou decrementar o valor dela mudando assim o sentido.

Uma implementação seria:

<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var raio = 10;
    var x=20;
    var vai,volta;
  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 raio = 10;
  var x=10;
  vai=true;
  function atualizaTela(){
    if(x==600){
      vai=false;
      volta=true;
    }
    if(x==0){
      volta=false;
      vai=true;
    }
    if(vai){
      x++;
    }
    if(volta){
      x--;
    }
    limpaTela();
    desenhaCirculo(x,20,raio);
  }
    setInterval(atualizaTela,10);
</script>

Espero ter ajudado e bons estudos.