Segue o exercício implementado. HTML ``` <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl

Acerte o Alvo | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Segue o exercício implementado.

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>Acerte o alvo</title>
</head>
<body>
    <div>
        <canvas id="tela" width="600px" height="400px"></canvas>
        <script src="alvo.js"></script>
    </div>
</body>
</html>

const tela = document.querySelector("#tela");
let pincel = tela.getContext("2d");
geraTela();

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

function desenhaCirculo(posX, posY,raio,cor){
    pincel.fillStyle= cor;
    pincel.beginPath();
    pincel.arc(posX,posY,raio,0,2 * Math.PI);
    pincel.fill();
}

function limparTela(){
    pincel.clearRect(0,0,600,400);
    geraTela();
}

let raio = 10;
let posXale = sorteiaPosicao;
let posYale = sorteiaPosicao;

function geraAlvo(posX,posY){
    desenhaCirculo(posX,posY,raio+20,"red");
    desenhaCirculo(posX,posY,raio+10,"white");
    desenhaCirculo(posX,posY,raio,"red");
}

function sorteiaPosicao(maximo){
    return Math.floor(Math.random()* maximo);
}

function updateTela(){
    limparTela();
    posXale = sorteiaPosicao(600);
    posYale = sorteiaPosicao(400); 
    geraAlvo(posXale,posYale);
}

function checagem(evento){
    let x = evento.pageX - tela.offsetLeft;
    let y = evento.pageY - tela.offsetTop;

    if(x>posXale-raio
            && x<posXale+raio
            && y>posYale-raio
            && y<posYale+raio){
                alert("[WINNER] Parabéns, acertou na mosca!")
            }
}

setInterval(updateTela,1000);
tela.onclick = checagem;