3
respuestas

[Bug] No me da la alert de tiro certero

este es mi codigo

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

<script>
    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 disenharCircuferencia(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 actualizarPantalla(){
        limpiarPantalla();
        disenharCircuferencia(x,20,10);
        x++;
    }

    function disenharObjetivo(x,y){
         disenharCircuferencia(x,y,radio + 20,"red");
        disenharCircuferencia(x,y,radio + 10,"white");
        disenharCircuferencia(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.offsetTop

        if((x < xAleatorio + radio) &&
           (x > xAleatorio - radio) &&
           (y < yAleatorio + radio) &&
           (y > yAleatorio - radio) ){
             alert("tiro certero");
        }
    }

    pantalla.onclick = disparar

</script>
3 respuestas

¡Hola Eduardo!

El problema que estás experimentando puede deberse a un error en la función disparar. Al parecer, hay un error en la línea donde se define la variable x. La propiedad offsetLeft de pantalla debe ser en mayuscula la primera letra de la palabra "Left". Por lo tanto, la línea debería ser:

var x = evento.pageX - pantalla.offsetLeft;

Intenta hacer este cambio y verifica si el problema se soluciona. Espero que esto te ayude a resolver el problema. ¡Buenos estudios!

¡Saludos!

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

Hola Eduardo León, una parte del problema como indica Bruno Botelho de Souza es "pantalla.offsetleft" cambiar a "pantalla.offsetLeft".

También hay un problema más, tienes definida dos veces la función "actualizarPantalla" eso es una inconsistencia, por lo que te recomiendo que borres la función que definiste primero, la que inicia en la línea 26 y dice:

function actualizarPantalla(){
    limpiarPantalla();
    disenharCircuferencia(x,20,10);
    x++;
}

Adicionalmente te recomiendo que en la línea 25 y la línea 49, la instrucción "x++" lo que hace s incrementar el valor de x en uno, esa línea no es funcional en este caso.

Venia por el mismo error, era la mayuscula. muchas gracias :) :)