Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
6
respuestas

[Duda] Alerta no funciona (alguno me puede ayudar porque no funciona?)

<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 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.offsetTop;

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

    pantalla.onclick = disparar;

</script>
6 respuestas

Hola Diana, el código si funciona Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad lo que tienes que hacer aceratar justo en el circulo rojo más pequeño para que así si salte la función alert

Si funciona, pero hay algo cuestionable. Me parece que hay un error en donde hace el match. Me fijé que en vez de acertar cuando apuntas al centro, aciertas cuando le das al circulo rojo exterior.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Hola Diana, estoy en la misma situación, ya revisé mi codigo muchas veces y según lo tengo igual al instructor y aun así no me lanza la alerta!. Si encuentras el error hazme el favor de decirme que yo haré lo mismo. Saludos

<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.offsetTop

        if ((x < xAleatorio + radio) &&
            (x > xAleatorio - radio) &&
            (y < yAleatorio + radio) &&
            (y > yAleatorio + radio)){
                alert("Acertó")
        }


   }

   pantalla.onclick = disparar



</script> 

Por que el mio no funciona?

Hola compañeros, me han ayudado a resolver mi duda al publicar la suya. Aquí lo que encontré en sus dudas.

Para "Yamsir Hernandez Perez" puedes solucionar corrigiendo en la comparación de la ubicación con el "IF" en la comparación "(y > yAleatorio + radio)" se debe cambiar el signo "+" por signo "-" así ya funciona, adicionalmente en tu línea de código 46 que dice "x++" no es necesario agregar ese contador progresivo, puedes eliminar esa línea.