Entrar Ainda não tem acesso?
2
respostas

Fiz de outra forma mas nao esta indo, me ajudem pf?

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 Renato Emanuel Dias Caldas
| 71.8k xp | 12 posts

A bola cresce mas nao diminui, sei onde ta o erro mas nao sei como resolver rsrs

<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 = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    var raio = 20

    function pulsa (){

        limpaTela

        if(raio <=   30 ) {
          raio = raio + 1 
          desenhaCirculo(300,200,raio, "blue");    

        } else if (raio > 30){
            raio = raio - 1
            desenhaCirculo(300,200, raio, "red");
        }
    }
    setInterval(pulsa,20);

</script>
2 respostas
por Gabriel Alves da Silva
| 29.1k xp | 1 posts

Na parte dos raios, o seu código ficou preso em um loop. Quando o raio fica maior que 30 e entra no else if o valor do raio volta para 30, o que faz com que ele entre no if e aumente para 31. o raio fica preso nos valores 30 e 31 e não consegue sair.

por Jessé Lopes
| 224k xp | 33 posts
UI Designer Pleno

Olá, Renato.

Você deve fazer duas alterações:

1. Com relação a forma com que você declarou a função limpaTela;, no seguinte trecho de código:


function pulsa() {
  limpaTela;

  if (raio <= 30) {
    raio += 2;
    desenhaCirculo(300, 200, raio, "blue");    
  } else if (raio > 30){
     raio -= 2;
     desenhaCirculo(300, 200, raio, "blue");
  }
}

Declare da seguinte forma:


limpaTela();

2. Já no trecho de código seguinte:


var limpa = document.querySelector('canvas');
var pincel = limpa.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0,  0,  600, 400);

Remova as linhas de código:


pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);

E coloque-as dentro da função:


function limpaTela() {
  pincel.clearRect(0, 0, 600, 400);
  pincel.fillStyle = 'lightgray';
  pincel.fillRect(0, 0, 600, 400);
}

Teste o resultado aí, e me dê um feedback, se era exatamente isso que você queria.