Hice algunos pequeños ajustes porque estaba muy difícil darle a ese objetivo tan pequeño, en especial si solo se considera certero al darle exactamente al centro, por lo que considere como tiro acertado, cuando cae en la superficie del círculo mayor. Además, me gusta más ver el tiro encima del objetivo esa es otra adecuación y finalmente quité el setInterval para verlo un tiro a la vez.
<canvas width="600" height="400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
var colores = ["blue","red","white"];
var x=20;
var radio = 20;
var xAleatorio;
var yAleatorio;
var xDisparo;
var yDisparo
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
function disenharCircunferencia(x,y,radio,color){
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function disenharObjetivo(x,y){
disenharCircunferencia(x,y,radio+20,"red");
disenharCircunferencia(x,y,radio+10,"white");
disenharCircunferencia(x,y,radio,"red");
disenharCircunferencia(x,y,radio-10,"white"); }
function sortearPosicion(valorMaximo){
return Math.floor(Math.random()*valorMaximo)
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400); }
function actualizaPantalla(){
xAleatorio= sortearPosicion(600);
yAleatorio= sortearPosicion(400);
disenharObjetivo(xAleatorio,yAleatorio);
}
function pintarDisparo(evento){
limpiarPantalla();
actualizaPantalla();
var xDisparo = evento.pageX - pantalla.offsetLeft;
var yDisparo = evento.pageY - pantalla.offsetTop;
pincel.fillStyle = "blue";
pincel.beginPath();
pincel.arc(xDisparo,yDisparo,10,0,2*3.14);
pincel.fill();
console.log(xDisparo + "," + yDisparo);
//alert("xDisparo: " + xDisparo +" yDisparo: " + yDisparo +" xObjetivo: " + xAleatorio +" yObjetivo: " + yAleatorio);
if ((xAleatorio < xDisparo + radio+20) &&
(xAleatorio > xDisparo - radio-20) &&
(yAleatorio < yDisparo + radio+20) &&
(yAleatorio > yDisparo - radio-20) ) {
alert("¡Tiro certero!");
}
}
//setInterval(actualizaPantalla,1000);
function pintarObjetivo(evento){
}
pantalla.onclick = pintarDisparo;
</script>