<meta charset="UTF-8">
<canvas width="600" height="400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "grey";
pincel.fillRect(0,0,600,400);
var radio=10;
var xAleatorio;
var yAleatorio;
var limx;
var limy;
function diseñarCircunferencia(x,y,radio,color){
pincel.fillStyle=color;
pincel.beginPath();// para comenzar a graficar
pincel.arc(x,y,radio,0,2*Math.PI);//cordenadas del grafico circulo
pincel.fill();
}
function limpiarPantalla(){
diseñarCircunferencia(limx,limy,radio+33,"grey");
}
function actualizarPantalla(){
limpiarPantalla(limx,limy);
xAleatorio=sortearPosicion(600);
yAleatorio=sortearPosicion(400);
limx=xAleatorio;
limy=yAleatorio;
diseharObjetivo(xAleatorio,yAleatorio);
}
function diseharObjetivo(x,y){
diseñarCircunferencia(x,y,radio+30,"red");
diseñarCircunferencia(x,y,radio+20,"blue");
diseñarCircunferencia(x,y,radio,"red");
}
function sortearPosicion(maximo){
return Math.floor(Math.random()*maximo);//redondea para abajo floor
}
setInterval(actualizarPantalla,1500);
function disparar(evento){
var x=evento.pageX-pantalla.offsetLeft; //obtenemos los valores del click x , y
var y=evento.pageY-pantalla.offsetTop;
if((x<xAleatorio+radio)&&
(x>xAleatorio-radio)&&
(y<yAleatorio+radio)&&
(y>yAleatorio-radio)){
alert("Tiro certero "+x+" "+y+" : "+xAleatorio+" "+yAleatorio);
}
}
pantalla.onclick=disparar;
</script>