HTML ``` <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met

Bolinha pulsando | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iniciando animação de bolinha</title>
</head>
<body>
    <div>

        <canvas id="tela" width="600px" height="400px"></canvas>
        <script src="anima.js"></script>
    </div>
</body>
</html>

const tela = document.querySelector("#tela");
const pincel = tela.getContext("2d");
pincel.fillStyle="lightgray";
pincel.fillRect(0,0,600,400);

function desenhaCirculo(posX,posY,raio){
    if(posX<100){
        pincel.fillStyle="red";
        }else if(posX>100 && posX<200){
            pincel.fillStyle="magenta";
        }else if(posX>200 && posX<300){
            pincel.fillStyle="orange";
        }else if(posX>300 && posX<400){
            pincel.fillStyle="yellow";
        }else if(posX>400 && posX<500){
            pincel.fillStyle="lightgreen";
        }else{
            pincel.fillStyle="white";
        }
    pincel.beginPath();
    pincel.arc(posX,posY,raio,0,2*Math.PI);
    pincel.fill();
}

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

let posX = 0;
let sentido = 10;
let pulsar = 20;
let altera = 1;

function updateTela(){
        limparTela();
        if(posX>590)
        {
            sentido = -10;
        }else if(posX < 10){
            sentido = 10;
        }

        if(pulsar>20){
            altera = -1;
        }else if(pulsar<0){
            altera = 1;
        }
        pulsar = pulsar + altera;
        desenhaCirculo(posX,20,pulsar);
        posX = posX + sentido;
        console.log(posX);         
}

setInterval(updateTela,20);