Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] EVENTOS, LOGICA DE PROGRAMACION

por AlbertoManuelEscobar
| 63k xp | 2 posts

HOLA ME PODRIAN AYUDAR, NO SE PORQUE NO ME FUNCIONA EL EVENTO.

<!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>Juego</title>
  </head>
  <body>
    <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 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);
      }

      let x = 0;

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

        let xaleatorio = sortearPosicion(600),
          yaleatorio = sortearPosicion(400);

        disenarObjetivo(xaleatorio, yaleatorio);

        x++;
      }

      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.addEventListener("click", disparar);
    </script>
  </body>
</html>
1 respuesta
por Bruno Botelho de Souza
| 3933.7k xp | 14897 posts
Alura Scuba Team

¡Hola Alberto!

Gracias por compartir tu duda con nosotros. Después de revisar tu código, noté que estás declarando las variables xaleatorio e yaleatorio dentro de la función actualizarPantalla(), por lo que no están disponibles en la función disparar().

Para solucionar este problema, puedes declarar las variables xaleatorio e yaleatorio fuera de la función actualizarPantalla(), en el ámbito global. De esta manera, estarán disponibles para la función disparar().

Aquí está el código modificado:

let xaleatorio;
let yaleatorio;

function actualizarPantalla() {
  limpiarPantalla();

  xaleatorio = sortearPosicion(600);
  yaleatorio = sortearPosicion(400);

  disenarObjetivo(xaleatorio, yaleatorio);

  x++;
}

Con esta modificación, las variables xaleatorio e yaleatorio se actualizarán correctamente en la función actualizarPantalla() y podrás utilizarlas en la función disparar() para verificar si el disparo fue certero.

Espero que esta solución te ayude a resolver tu problema. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Buena suerte con tu proyecto y sigue adelante!

¡Saludos!

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