Hola ¿Cómo están?
Tengo una consulta, estoy haciendo el juego de darle al blanco al objetivo, tal como hizo el profesor. La lógica detrás de todo ello la entiendo. El problema es que aunque le de clic al blanco rara vez me sale el cartel: alert("Tiro certero"); A continuación pongo el código para ver si hay algo incorrecto en lo que copie al profesor:
<meta charset="UTF-8">
<canvas width="600" height="400"> </canvas>
<script>
//03 Disparando contra el objetivo
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, 600, 400);
var radio = 10;
var xAleatorio;
var yAleatorio;
function diseniarCircunferencia(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);
}
function diseniarObjetivo(x, y) {
diseniarCircunferencia(x, y, radio + 20, "red");
diseniarCircunferencia(x, y, radio + 10, "white");
diseniarCircunferencia(x, y, radio, "red");
}
function sortearPosicion(maximo) {
return Math.floor(Math.random() * maximo);
}
function actualizarPantalla() {
limpiarPantalla();
xAleatorio = sortearPosicion(600);
yAleatorio = sortearPosicion(400);
diseniarObjetivo(xAleatorio, yAleatorio);
}
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");
}
}
setInterval(actualizarPantalla, 1000);
pantalla.onclick = disparar;
</script>
Gracias.