Duda relacionada a Alert | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

10
respuestas

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

20/04/2023

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

21/04/2023

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

21/04/2023

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

| 95.7k xp | 10 posts

21/04/2023

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

21/04/2023

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 pantalla no se porque copiando y pegando las "var" funciona.

por Estudiante

| 81.4k xp | 10 posts

21/04/2023

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

por Estudiante

| 81.4k xp | 10 posts

22/04/2023

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

22/04/2023

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

| 128.6k xp | 39 posts

Realtor

24/04/2023

Migue Angel y Angel Jose,aqui ya declaraste estas variables

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

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

por IsraelBasurtoSanchez

| 141.7k xp | 85 posts

Estudiante

25/04/2023

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