Aprende a programar la selección de ataques en un videojuego usando event listeners y variables globales en JavaScript. Esta lógica te permite capturar el clic del jugador sobre botones de fuego, agua o tierra, y guardar su elección en una variable accesible desde cualquier función. Es ideal si estás construyendo tu primer proyecto interactivo con HTML y JS.
Cómo conectar botones de ataque con funciones en JavaScript
En el HTML del juego ya existen tres botones: fuego, agua y tierra. La idea es que cada botón dispare una función distinta cuando el jugador haga clic, y esa función registre el ataque elegido.
La forma de lograrlo es con un event listener por cada botón. Cuando el jugador hace clic en el botón de fuego, se ejecuta la función ataqueFuego. Lo mismo con agua y tierra, cada uno con su propia función dedicada.
¿Qué es un event listener en JavaScript? Es un método que escucha un evento específico, como un clic, sobre un elemento del DOM. Cuando ese evento ocurre, ejecuta la función que le indicaste.
Dónde colocar los event listeners de los botones
La mejor ubicación es dentro de la función iniciarJuego, porque ahí ya vive la lógica que selecciona elementos del DOM y registra eventos para el botón de mascota. Mantener junta la configuración inicial del juego hace el código más predecible.
Dentro de esa función se crean tres variables nuevas con document.getElementById:
botonFuego apunta al botón con id boton-fuego.botonAgua apunta al botón con id boton-agua.botonTierra apunta al botón con id boton-tierra.
Luego, a cada una se le agrega un addEventListener de tipo click que llama a su función correspondiente: ataqueFuego, ataqueAgua o ataqueTierra [09:30].
Por qué necesitas variables globales para guardar el ataque del jugador
Cuando declaras una variable dentro de una función, esa variable solo existe ahí. Ninguna otra función puede leerla ni modificarla. Y aquí viene lo interesante: el código del juego ya está repartido en múltiples funciones, así que necesitas una forma de compartir información entre ellas.
La solución son las variables globales: variables declaradas fuera de cualquier función, accesibles desde todo el archivo.
¿Qué es una variable global en JavaScript? Es una variable declarada fuera de toda función, lo que permite que cualquier función del archivo pueda leerla o modificarla.
Cómo declarar la variable global ataqueJugador
En la parte superior del archivo, por encima de todas las funciones, se declara ataqueJugador. Esta variable va a almacenar el elemento elegido por el jugador en cada turno: fuego, agua o tierra [06:50].
Desde ese momento, cualquier función puede asignarle un valor o leerlo, sin importar en qué parte del flujo se encuentre el juego.
Cómo asignar el ataque dentro de cada función
Cada función de ataque tiene una sola responsabilidad por ahora: actualizar el valor de la variable global según el botón que el jugador presionó.
- En
ataqueFuego, se asigna ataqueJugador = 'Fuego'.
- En
ataqueAgua, se asigna ataqueJugador = 'Agua'.
- En
ataqueTierra, se asigna ataqueJugador = 'Tierra'.
Para verificar que todo funciona, se agrega un alert(ataqueJugador) al final de cada función. Aunque la línea es idéntica en las tres, el resultado cambia porque la variable se modifica antes de imprimirse [12:40].
Cómo organizar el código con funciones colapsables
Los editores modernos permiten colapsar bloques de código usando las flechas junto a los números de línea. Es una ayuda visual práctica cuando trabajas con archivos largos llenos de funciones, y no afecta en nada la ejecución.
¿Por qué mi botón no hace nada al hacer clic? Porque la función asociada solo cambia una variable interna. Si no muestras una alerta o modificas el DOM, no verás cambios en pantalla aunque el código esté funcionando.
Con esta estructura, ya tienes la base para capturar la elección del jugador. El siguiente paso es generar el ataque aleatorio del enemigo y comparar ambos para decidir quién gana el turno. ¿Dónde colocarías tú los event listeners de los botones de ataque? Cuéntamelo en los comentarios.
