Fiz um contador para a pontuação enquanto o jogador vai acertando. Limitei também a criação do alvo a borda do canvas para que o alvo não fosse criado cortado.
<canvas width="1600" height="720">
</canvas>
<br>
<h1>Você acertou <span>0</span> Vezes</h1>
<script>
var tela = document.querySelector('canvas');
var canetinha = tela.getContext('2d');
canetinha.fillStyle = 'lightgrey';
canetinha.fillRect(0,0 , 1600,720);
var raio = 20;
var xRandom;
var yRandom;
var pontos = 0;
var span = document.querySelector('h1 span');
function desenhaCirculo(x, y, raio, cor){
canetinha.fillStyle = cor;
canetinha.beginPath();
canetinha.arc(x, y, raio, 0, 2* Math.PI);
canetinha.fill();
}
function limpaTela(){
canetinha.clearRect(0,0 , 1600, 720);
canetinha.fillStyle = 'lightgrey';
canetinha.fillRect(0,0 , 1600,720);
}
function desenhaAlvo(x, y){
desenhaCirculo(x,y, raio + 20, 'red');
desenhaCirculo(x,y, raio + 10, 'white');
desenhaCirculo(x,y, raio, 'red');
}
function sorteiaPosicao(minimo, maximo){
return Math.floor(Math.random() * (maximo - minimo) + minimo);
}
function atualizaTela(){
limpaTela();
xRandom = sorteiaPosicao(40,1560);
yRandom = sorteiaPosicao(40,680);
desenhaAlvo(xRandom, yRandom);
}
function dispara(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if((x > xRandom - raio)
&& (x < xRandom + raio)
&& (y > yRandom - raio)
&& (y < yRandom + raio)){
pontos = pontos + 1;
span.innerHTML = pontos;
}
}
tela.onclick = dispara;
setInterval(atualizaTela, 1000);
</script>