<script>
let coordDianaX=0;
let coordDianaY=0;
let radio=10;
let pantalla = document.querySelector("canvas");
let pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
const definirPosicion=(maximo)=>{
return Math.floor(Math.random()*maximo);
}
const dibujarDiana=(x,y,radio,color)=>{
pincel.fillStyle =color;
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2 * Math.PI);
pincel.fill();
}
const limpiarPantalla=()=>{
pincel.clearRect(0,0,600,400);
}
const actualizarPantalla=()=>{
let x=definirPosicion(570)-pantalla.offsetLeft;
if(x<30){
x=30;
}
let y=definirPosicion(370)-pantalla.offsetTop;
if(y<30){
y=30;
}
coordDianaX=x;
coordDianaY=y;
dibujarDiana(x,y,radio+20,'red');
dibujarDiana(x,y,radio+10,'white');
dibujarDiana(x,y,10,'red');
}
setInterval(() => {
limpiarPantalla();
actualizarPantalla();
}, 2000);
const coordsDisparo=(event)=>{
let {x,y}=event;
x=x-pantalla.offsetLeft;
y=y-pantalla.offsetTop;
const distancia = Math.sqrt((x - coordDianaX) ** 2 + (y - coordDianaY) ** 2);
console.log(distancia);
if (distancia <= radio) {
alert('¡Tiro certero!');
} else {
alert('¡Fallaste! Inténtalo de nuevo.');
}
}
pantalla.onclick=coordsDisparo;
</script>