Tardé mucho resolviendo un problema que tenía pues el alert solo me salía en el primer objetivo, pero ya lo terminé por fin :D
<meta charset = "UTF8">
<h1>Tiro con arco</h1>
<br>
<br>
<br>
<canvas width = "600" height = "400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = " #DAF7A6 ";
pincel.fillRect(0, 0, 600, 400);
function designcircle(x,y,ratio, color){
var posicion = Math.round(Math.random() * 10);
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,ratio,0,2*Math.PI);
pincel.fill();
}
var x = 0;
var sentido = 1
var r = 10
var puntos = 0
function limpiar(){
pincel.clearRect(0, 0, 600, 400);
}
function diseñarobjetivo(x,y) {
designcircle(x,y,r + 30, "#cae671" );
designcircle(x,y,r + 20, "#cb4335" );
designcircle(x,y,r + 10, " #ecf0f1 ");
designcircle(x,y,r, " #cb4335 ");
}
function random(maximo) {
return Math.floor(Math.random() * maximo);
}
function disparo(evento) {
x = evento.pageX - pantalla.offsetLeft;
y = evento.pageY - pantalla.offsetTop;
console.log(evento);
if((x < xrandom + r) &&
(x > xrandom - r) &&
(y < yrandom + r) &&
(y > yrandom - r) ) {
alert("Tino certero");
puntos = puntos + 100
}
}
function updatescreen() {
limpiar();
pincel.fillStyle = " #DAF7A6 ";
pincel.fillRect(0, 0, 600, 400);
xrandom = random(550);
yrandom = random(350);
escribirTexto(10 , 20, "Puntos: " + puntos)
diseñarobjetivo(xrandom,yrandom);
}
function escribirTexto(x , y, texto) {
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.font="15px Georgia";
pincel.fillStyle="black";
pincel.fillText(texto, x, y);
}
escribirTexto(10 , 20, "Puntos: " + puntos)
var xrandom = random(550);
var yrandom = random(350);
diseñarobjetivo(xrandom,yrandom);
setInterval(updatescreen,2500);
pantalla.onclick = disparo;
</script> 
