Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Pulsando e andando

Bolinha pulsando e andando ... Funcionou , mas fiquei com dúvidas nos comandos IF e else if , teria como simplificar a quantidade de Ifs ?

<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, cor) {
    pincel.fillStyle = "red";
    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 fatorCrescimento = 0;
  var x = 20;
  var sentido = 1

  function atualizaTela() {
    limpaTela();
    if (raio > 30) {
      fatorCrescimento = -1;
    } else if (raio < 11) {
      fatorCrescimento = 1;
    }
    raio = raio + fatorCrescimento;



    if (x > 600) {
      sentido = -1;
    } else if (x < 0) {
      sentido = 1;
    }
    desenhaCirculo(x, 30, raio);
    x = x + sentido;



  }


  setInterval(atualizaTela, 20);
</script>
1 resposta
solução!

Olá Dev, tudo certo?

Parabéns! Seu código está ótimo, bem resumido e funcional. Ao acrescentar o movimento da bolinha foi além e buscou se desenvolver ainda mais, continue assim!

Quanto ao uso dos if e else, vejo que conseguiu manejar bem essas estruturas de condição, seu código atual está bem resumido e dificilmente poderíamos negar o uso desses if.

Se surgir qualquer dúvida estamos à disposição.

Um bom dia e bons estudos.