<canvas width= "800" height= "600"></canvas>

<script>

var tela= document.querySelector("canvas");
var pincel= tela.getContext("2d");

pincel.fillStyle= "lightgray";
pincel.fillRect(0, 0, 800, 600);

var raio= 10;
var xAleatorio;
var yAleatorio;

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, 800, 600);
}

function desenhaAlvo(x, y) {

    desenhaCirculo(x, y, raio + 20, "red");
    desenhaCirculo(x, y, raio + 10 , "white");
    desenhaCirculo(x, y, raio, "red");
}

function atualizaPosicao(maximo) {

    return Math.floor(Math.random() * maximo);
}

function alvoAleatorio() {

    limpaTela();

    var xAleatorio= atualizaPosicao(800);
    var yAleatorio= atualizaPosicao(600);
    desenhaAlvo(xAleatorio, yAleatorio);
}

setInterval(alvoAleatorio, 1000);


function dispara(evento) {

    var x= evento.pageX - tela.offsetLeft;
    var y= evento.pageY - tela.offsetTop;

    if((x > xAleatorio - raio) 
    && (x < xAleatorio + raio) 
    && (y > yAleatorio - raio) 
    && (y < yAleatorio + raio)) {

        alert("Acertou");
    }
}

tela.onclick= dispara;

</script>