Tu código tiene algunos errores de sintaxis:
Este es tu código:
<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;
function disenharCircunferencia(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 disenharObjetivo(x,y){
disenharCircunferencia(x,y,radio + 20, "red");
disenharCircunferencia(x,y,radio + 10, "white");
disenharCircunferencia(x,y,radio, "red");
}
function sortearPosicion(maximo){
return Math.floor(Math.random()*maximo);
}
function actualizarPantalla(){
limpiarPantalla();
xAleatorio = sortearPosicion(600);
yAleatorio = sortearPosicion(400);
disenharObjetivo(xAleatorio,yAleatorio);
x++;
}
setInterval(actualizarPantalla,1000);
function disparar(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.ofsetTop;
if ((x < xAleatorio + radio)&&
(x > xAleatorio - radio)&&
(y < yAleatorio + radio)&&
(y > yAleatorio - radio) ){
alert("acerto");
}
}
pantalla.onclick = disparar;
</script>
Los errores son:
El nombre de la función "disenharCircunferencia" está mal escrito, debería ser "dibujarCircunferencia" o "dibujarCírculo".
La variable "ofsetTop" en la función "disparar" está mal escrita, debería ser "offsetTop".
En la función "disparar", la verificación de colisión entre el proyectil y el objetivo solo se hace si se hace clic dentro del área del objetivo. Si se hace clic fuera del objetivo, no se hace nada. Para solucionar esto, la verificación debe ser colocada dentro de una declaración "if" que verifica si el valor de "x" y "y" son válidos.
Hay un error de ortografía en la línea 48, la propiedad debería ser offsetTop en lugar de ofsetTop. Por lo tanto, el valor de y no se está calculando correctamente y la detección de colisión no funciona correctamente, lo que puede ser la razón por la cual el alert no se muestra.
Ahora te dejo el codigo ya corregido :
<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;
function dibujarCircunferencia(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 dibujarObjetivo(x, y) {
dibujarCircunferencia(x, y, radio + 20, "red");
dibujarCircunferencia(x, y, radio + 10, "white");
dibujarCircunferencia(x, y, radio, "red");
}
function sortearPosicion(maximo) {
return Math.floor(Math.random() * maximo);
}
function actualizarPantalla() {
limpiarPantalla();
xAleatorio = sortearPosicion(600);
yAleatorio = sortearPosicion(400);
dibujarObjetivo(xAleatorio, yAleatorio);
x++;
}
setInterval(actualizarPantalla, 100); // ajustar el intervalo a 100 milisegundos
function disparar(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
// verificación de colisión
if (
x >= xAleatorio - radio &&
x <= xAleatorio + radio &&
y >= yAleatorio - radio &&
y <= yAleatorio + radio
) {
alert("¡Acertaste!");
}
}
pantalla.onclick = disparar;
</script>