Segue abaixo o exercicio. 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>
JS
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;
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();
let posXale = sorteiaPosicao(570); //evitar que corra o risco de ficar fora da tela
if(posXale<10){
posXale=30;
}
let posYale = sorteiaPosicao(370); //evitar que corra o risco de ficar fora da tela
if(posYale<10){
posYale=30;
}
geraAlvo(posXale,posYale);
}
setInterval(updateTela,1000);