Entrar ¿Aún no tienes acceso?
10
respuestas

Duda relacionada a Alert

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Nuestro primer juego y actividad Disparando contra el objetivo

por Miguel Ángel Gómez Galicia
| 81.4k xp | 8 posts
Especialista Jr

Compañeros, no sé si alguien pudiera orientarme o checar en qué me habré equivocado, al dar en el centro de la diana no sale el alert, según yo, hice todo como el video, adjunto mi código.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <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 xAleat;
      var yAleat;

      function disenharCirculo(x, y, radio, color) {
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2 * Math.PI);
        pincel.fill();
      }

      function limpiar() {
        pincel.clearRect(0, 0, 600, 400);
      }

      function sortearPosicion(maximo) {
        return Math.floor(Math.random() * maximo);
      }

      function disenharObjetivo(x, y) {
        disenharCirculo(x, y, radio + 20, "red");
        disenharCirculo(x, y, radio + 10, "white");
        disenharCirculo(x, y, radio, "red");
      }

      var x = 0;

      function actualizarPantalla() {
        limpiar();
        var xAleat = sortearPosicion(600);
        var yAleat = sortearPosicion(400);
        disenharObjetivo(xAleat, yAleat);

        x++;
      }
      setInterval(actualizarPantalla, 1500);

      function disparar(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if ((x < xAleat + radio) &&
          (x > xAleat - radio) &&
          (y < yAleat + radio) &&
          (y > yAleat - radio)
        ) {
          alert("Tiro Certero");
        }
      }

      pantalla.onclick = disparar;
    </script>
  </body>
</html>
10 respuestas
por Estudiante
| 121.4k xp | 13 posts

No es de mucha ayuda, pero me pasa lo mismo. El alert no me sale y mi codigo esta igual al del video.

por Estudiante
| 81.4k xp | 10 posts

Hola estoy igual, ya compare mi codigo en este foro y es el mismo, unos mencionan que quitando el VAR de xAleatorio y yAleatorio en la seccion de limpiar pantalla, sin embargo yo no las tengo y sigue sin aparecer el mensaje de alert : (.

por Angel Junior Gonzales Espinoza
| 127.2k xp | 31 posts
.

Me pasa lo mismo, no logro que salga el alert

<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();
        var xAleatorio = sortearposicion(600);
        var 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>
por Alvaro Raul Hamon Sanchez
| 91.3k xp | 10 posts

revisando el codigo de Angel Junior y de Miguel Angel, vero que la falla se presenta por que estan declarando nuevamente la variable xAleatorio y yAleatorio en la funcion actualizarPantalla

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <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 xAleat;
      var yAleat;

      function disenharCirculo(x, y, radio, color) {
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2 * Math.PI);
        pincel.fill();
      }

      function limpiar() {
        pincel.clearRect(0, 0, 600, 400);
      }

      function sortearPosicion(maximo) {
        return Math.floor(Math.random() * maximo);
      }

      function disenharObjetivo(x, y) {
        disenharCirculo(x, y, radio + 20, "red");
        disenharCirculo(x, y, radio + 10, "white");
        disenharCirculo(x, y, radio, "red");
      }

      var x = 0;

      function actualizarPantalla() {
        limpiar();
        /*Aqui no se deben declarar las variables
        ya que no las reconocera fuera de la funcion*/
        var xAleat = sortearPosicion(600);
        var yAleat = sortearPosicion(400);
        disenharObjetivo(xAleat, yAleat);

        x++;
      }
      setInterval(actualizarPantalla, 1500);

      function disparar(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if ((x < xAleat + radio) &&
          (x > xAleat - radio) &&
          (y < yAleat + radio) &&
          (y > yAleat - radio)
        ) {
          alert("Tiro Certero");
        }
      }

      pantalla.onclick = disparar;
    </script>
  </body>
</html>
por Roberto Jaziel Hernández Silva
| 82.3k xp | 1 posts

La verdad no se porqué funciona pero lo hace...

function disparar(evento){

        var x = evento.pageX - pantalla.offsetleft;
        var y = evento.pageY - pantalla.offsetTop;

        if( x < xAleatoreo + radio&&x > xAleatoreo - radio&&y < yAleatoreo + radio&&y > yAleatoreo - radio){
            alert("Tiro Certero")
        }
        console.log(x+" , "+ y)
    }
    pantalla.onclick = disparar;
    actualizarPantalla();

este es el código que escribí basado en el del curso y no funciona... Imagen de la consola donde no detecta la primera "X" Luego copie y pegue el código de un ejercicio anterior 

 function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        pincel.fillStyle = colores[col];
        pincel.beginPath();
        pincel.arc(x,y,7,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

pero solo copie las variables y funciono... imagen de la consola con ambas coordenadas presentadas de forma correcta

El mensaje alerte se muestra en pantallano se porque copiando y pegando las "var" funciona.

por Estudiante
| 81.4k xp | 10 posts

Sigo igual, mmm ya hice lo de copiar y pegar y tampoco :(.

por Estudiante
| 81.4k xp | 10 posts

Después de tantos intentos volvi a generar el codigo y estaba igualito y ya me quedo, esta medio raro.

por Augusto Franco Leon
| 100.2k xp | 3 posts
Atención a clientes

Con la respuesta de Alvaro Raul Hamon, entiendo que al momento de que la variable esta de nuevo dentro de la función esta cambia de valor y por eso no es igual a la función de disparar, fue de gran ayuda gracias.

por Rommel Alvarez Del Solar
| 114.5k xp | 39 posts
Realtor

Migue Angel y Angel Jose,aqui ya declaraste estas variables

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidaddebes borrar las var

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

por IsraelBasurtoSanchez
| 141.7k xp | 85 posts
Estudiante 
<meta charset="UTF-8">


<h1 style="color: darkturquoise;">PROGRAMA DISPARANDO CONTRA EL OBJETIVO</h1>
<h3 style="color: darkorange;">Dale en el centro rojo</h3>
<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 disenarCircunferencia(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();
        disenarCircunferencia(x, 20, 10);
        x++;

    }

    function disenarObjetivo(x, y) {

        disenarCircunferencia(x, y, radio + 20, "red");
        disenarCircunferencia(x, y, radio + 10, "white");
        disenarCircunferencia(x, y, radio, "red");


    }

    function sortearPosicion(maximo) {

        return Math.floor(Math.random() * maximo);

    }

    function actualizarPantalla() {

        limpiarPantalla();
        xAleatorio = sortearPosicion(600);
        yAleatorio = sortearPosicion(400);
        disenarObjetivo(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(" Buen Tiro !Felicidades!");
        }          

    }

    pantalla.onclick = disparar;


</script>

Se los dejo y si tiene que declarar las variables fuera de la función actualizaPantalla de las linea de código 59 a la 67 hay esta tu error.