Realicé el ejercicio del juego de la diana, pero por alguna razón no me da el alert cuando se cumple el if de la function disparar. He revisado varias veces el código y no veo error. Ustedes logran ver alguno?
<canvas width="600" height="400">
<canvas/>
<script>
//El objetivo es crear un juego de diana.
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0,0,600,600);
var radio = 10;
var xAleatorio;
var yAleatorio;
function disenarCircunferencia(x,y,radio,color) {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarpantalla() {
pincel.clearRect(0,0,600,400);
}
var x = 0;
function disenarObjetivo (x,y) {
disenarCircunferencia(x,y,radio+20,'red');
disenarCircunferencia(x,y,radio+10,'white');
disenarCircunferencia(x,y,radio,'red');
}
function sortearPosicion (maximo) {
return Math.floor(Math.random()*maximo)
}
function actualizarPantalla() {
limpiarpantalla();
var xAleatorio = sortearPosicion(600);
var yAleatorio = sortearPosicion(400);
disenarObjetivo(xAleatorio,yAleatorio);
x++;
}
setInterval(actualizarPantalla,2000);
function disparar (evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ((x < xAleatorio + radio) &&
(x > xAleatorio - radio) &&
(y < yAleatorio + radio) &&
(y > yAleatorio - radio)) {
alert("Tiro certero");
}
}
pantalla.onclick = disparar;
</script>