Entrar Ainda não tem acesso?
1
resposta

O pulso ainda pulsa

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 Pedro Henrique Souza Lima
| 23.9k xp | 49 posts
<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 = 19;
    var fatorCrescimento = 0;

    function atualizaTela()  {

    limpaTela();

    if(raio > 30)  {
        fatorCrescimento = -1
    } else if(raio < 20) {
        fatorCrescimento = 1
    }

    raio = raio + fatorCrescimento;

    desenhaCirculo(300, 200, raio, 'blue');

  }

    setInterval(atualizaTela, 20);

</script>
1 resposta
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi Pedro Henrique, tudo bem?

Obrigado pela paciência em obter uma resposta!

Parabéns pela sua dedicação e empenho durante a realização das atividades.

Para manter o padrão de boas práticas, faria uma pequena adição ao seu código e colocaria ponto e vírgula (;) ao final das condições na função atualizaTela().

Assim o código para esta parte seria escrito da seguinte maneira:

if(raio > 30)  {
        fatorCrescimento = -1;
    } else if(raio < 20) {
        fatorCrescimento = 1;
    }

Recomendo que caso se sinta confortável em compartilhar seu conhecimento, interagir com outros estudantes, trocar experiências e fazer networking, participe do discord oficial da Alura de alunas e alunos:

Caso tenha dúvidas, estarei à disposição para te ajudar!

Grande abraço e bons estudos!