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

Solução alternativa, mantendo o fundo.

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 MARCO TULIO MASSULA
| 123.2k xp | 13 posts
Técnico Seg. Trabalho

Pessoal, utilizei a mesma lógica do exercício anterior e deu certo. Também adotei o "pincel.fillRect" ao invés do "pincel.clearRect" para limpar a tela (somente no espaço ocupado pelo círculo), mantendo o fundo cinza.

Por fim, coloquei um comando para somente iniciar (de zero, pra não ficar esquisito) o código a partir do clique do mouse.

O problema que encontrei é que, cada vez que se clica com o mouse, ele repete a "setInterval" e aumenta a cadência da pulsação. Tentei colocar uma variável (dentro e fora da função que controlasse a cadência) e uma função if que voltasse o valor para 20, mas nada funcionou.

<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.fillStyle = "lightgray";
        pincel.fillRect(250, 150, 100, 100);
    }

    var raio = 0;
    var aumenta = 1;

    function atualizaTela(){
        limpaTela();
        if(raio > 30){
            aumenta = -1;
        } else if (raio < 20){
            aumenta = 1;
        }
        desenhaCirculo(300, 200, raio, "blue");
        raio = raio + aumenta;
    }

    function clica(){
        setInterval(atualizaTela, 20);
    }

    tela.onclick = clica;

</script>

Valeu!

4 respostas
por Geovani Granieri
| 909.1k xp | 1038 posts
Instrutor

Olá Marco, tudo bem com você?

Ficou muito legal seu resultado, em relação ao clique do mouse, você queria que quando clicasse novamente parasse a pulsação?

Caso seja isso você poderia fazer da seguinte maneira, adicionando algumas funções:

var ativo = false;
var temporizador;

    function iniciarPulso() {
        temporizador = setInterval(atualizaTela, 20);
    }

    function pararPulso() {
        return clearInterval(temporizador);
    }

    function clica() {
        if(ativo) {
            ativo = false;
            return pararPulso()
        }
        ativo = true;
        iniciarPulso();
    }

    tela.onclick = clica;

Dessa maneira ao clicar pela primeira vez ele começa a pulsar, entretanto a variável ativo controla para que no próximo clique pare de executar a função atualizaTela() por meio de uma função chamada clearInterval que serve para remover o comportamento da setInterval()

Criei um codepen para te mostrar o resultado: Pulso Alura

Entendeu? Qualquer coisa estou a disposição :)

Abraços e Bons Estudos!

por MARCO TULIO MASSULA
| 123.2k xp | 13 posts
Técnico Seg. Trabalho

Opa, Geovani!

Obrigado pela sugestão!

Na verdade, o que me incomodou no meu código é que, cada vez que se clica com o mouse, a bola duplica a velocidade do pulso. Imagino que isso acontece por causa de uma sobreposição do comando setInterval . Mas como ainda sou bem iniciante, não consegui resolver.

De qualquer maneira, gostei muito da função de parar o pulso e mais ainda de conhecer o codepen!

Obrigado!

solução!
por Geovani Granieri
| 909.1k xp | 1038 posts
Instrutor

Olá, Marco!

Imagino que isso acontece por causa de uma sobreposição do comando setInterval

Realmente é issso mesmo, a cada vez que você clica está disparando uma função que é infinita, então ficam várias instâncias, algumas com raio 10, outras 15, e assim por diante, criando esse comportamento de um pulso cada vez mais rápido.

Mas se você quiser que apenas fique pulsando, mesmo que o usuário continue clicando, vou te dar uma solução fácil e de nível iniciante que acredito que irá compreender:

var ativo = false;

function clica() {
    if(ativo) return;

    ativo = true;
    setInterval(atualizaTela, 20);
}

Aqui estou fazendo a sua sugestão de ter uma variável que controla, e vai funcionar da seguinte maneira:

  • Quando usuário clicar pela primeira vez a var ativo irá ficar true e será disparado a pulsação
  • Nas próximas vezes que o usuário clicar como ativo = true ela não irá disparar novamente pois temos um if que já sai da função logo no começo.

Abraços e Bons Estudos!

por MARCO TULIO MASSULA
| 123.2k xp | 13 posts
Técnico Seg. Trabalho

Valeu, Geovani!

Era isso mesmo! As melhores soluções são as mais simples!

Muito obrigado!!