1
resposta

[Projeto] Pulsando e Andando

O código que consegui fazer foi esse, até então deu tudo certo :)

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

<script>

    let tela = document.querySelector("canvas");
    let pincel = tela.getContext("2d");
    pincel.fillStyle = "gray";
    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);
    }

    let x = 20;
    let y = 200;
    let raio = 10;
    let cor = "red";
    let sentido = 1;
    let crescer = 1;

    function pulsarBolinha(){
        limpaTela();
        if(raio > 30){
            crescer -= 1;
        } else {
            if(raio < 20){
                crescer += 1;
            }
        }
        if (x > 600 - raio){
            sentido -= 1;
        } else {
            if (x < 0 + raio){
                sentido += 1;
            }
        }

        desenhaCirculo(x,y,raio, cor);
        raio = raio + crescer;
        x = x + sentido;
    }

    setInterval(pulsarBolinha, 20);

</script>
1 resposta

Olá Deivid, tudo bem? Espero que sim!

Parabéns pelo código! Ficou excelente, praticar é uma forma de consolidar nosso conhecimento. Continue se dedicando aos estudos e praticando cada vez mais!

Caso tenha dúvidas, fico á disposição.

Abraços!