let canvas = document.querySelector("#canvas");
let pincel = canvas.getContext("2d");
let circleSeparation = 10;
pincel.fillStyle = "grey";
pincel.fillRect(0, 0, 600, 600);
let xAleatorio;
let yAleatorio;
let radio = 10;
const drawCircle = (x,y,radius,color) => {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,radius,0,2*Math.PI);
pincel.fill();
}
let x = 0;
const depurarPantalla = () => {
pincel.clearRect(0, 0, 600, 600);
}
const objetivo = (x,y)=>{
drawCircle(x, y,radio+20,"black");
drawCircle(x, y,radio+10,"yellow");
drawCircle(x, y,radio,"red");
}
const valorAleatorio = (valor) => {
return Math.floor(Math.random()*valor);
}
const actualizarPantalla = () => {
depurarPantalla();
xAleatorio = valorAleatorio(600);
yAleatorio = valorAleatorio(600);
objetivo(xAleatorio,yAleatorio);
}
const disparo = (e) => {
let rect = canvas.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
let distancia = Math.sqrt(Math.pow(x - xAleatorio, 2) + Math.pow(y - yAleatorio, 2));
if (distancia<=radio) {
alert("acertaste");
console.log("acertaste");
}
}
setInterval(actualizarPantalla,5000);
canvas.onclick = disparo;