Consegui fazer creio que ficou legal
<html><br><br><br>
<body background="https://thumbs.dreamstime.com/b/jogo-um-fundo-32412378.jpg">
<center>
<canvas width="600" height="400">
</canvas>
<br>
<h1>Você acertou <span>0</span> Vezes</h1>
</center>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0,0 , 600,400);
var raio = 10;
var linhaX;
var linhaY;
var pontos = 0;
var span = document.querySelector('h1 span');
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);
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0,0 , 600,400);
}
function desenhaAlvo(x, y){
desenhaCirculo(x,y, raio + 25, 'black');
desenhaCirculo(x,y, raio + 20, 'red');
desenhaCirculo(x,y, raio + 15, 'black');
desenhaCirculo(x,y, raio + 10, 'white');
desenhaCirculo(x,y, raio + 5, 'black');
desenhaCirculo(x,y, raio, 'red');
desenhaCirculo(x,y, raio - 8, 'black');
}
function sorteiaPosicao(minimo, maximo){
return Math.floor(Math.random() * (maximo - minimo) + minimo);
}
function atualizaTela(){
limpaTela();
linhaX = sorteiaPosicao(40,590);
linhaY = sorteiaPosicao(40,390);
desenhaAlvo(linhaX, linhaY);
}
function dispara(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if((x > linhaX - raio)
&& (x < linhaX + raio)
&& (y > linhaY - raio)
&& (y < linhaY + raio)){
pontos = pontos + 1;
span.innerHTML = pontos;
}
}
tela.onclick = dispara;
setInterval(atualizaTela, 1000);
</script>
</body>
</html>