Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

No genera la alerta..

<canvas width="600" height="400"> </canvas>

<script>
    let pantalla = document.querySelector("canvas");
    let pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400); 

    let radio = 10;
    let xAleatorio;
    let 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);
    }

    let x = 0

    function actualizarPantalla (){

        limpiarPantalla();
        xAleatorio = sortearPosicion(600);
        yAleatorio = sortearPosicion(400);
        disenharObjetivo(xAleatorio,yAleatorio);
        x++;

        }

    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);

    }          

    setInterval(actualizarPantalla,2000);

    function disparar(evento){

        let x = evento.pageX - pantalla.offsetLeft;
        let 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> 
1 respuesta

Hola Hernan, espero que esté bien.

Para que el código te funcione correctamente, la "y" de evento.pageY dentro de la function disparar, hay que estar mayúscula, pues es una propiedad de event y debe escribirse en camelCase, tal cual evento.pageX.

Se quedará así:

  let y = evento.pageY- pantalla.offsetTop;

Si aún te quedan dudas, aquí estaremos para apoyarte :)

¡Saludos!

Si este post te ayudó, por favor, marca como solucionado ✓. ¡Continúa con tus estudios!