Programar un combate entre mascotas en JavaScript exige que el ataque del enemigo se dispare en el mismo momento en que el jugador elige fuego, agua o tierra. La clave está en encadenar funciones, usar una variable global y aplicar aleatoriedad con condicionales para que el rival responda solo, sin botones extra.
¿Cómo se conecta el ataque del jugador con el del enemigo?
La lógica parte de un detalle simple: el enemigo no tiene su propio botón. Su ataque debe ejecutarse justo después de que tú elijas el tuyo.
Para lograrlo, dentro de cada función de ataque del jugador (ataqueFuego, ataqueAgua, ataqueTierra) reemplazas la alerta original por una llamada a una nueva función: ataqueAleatorioEnemigo. Así, cualquier clic en los tres botones dispara dos cosas en cadena:
Guarda el ataque del jugador en su variable global.
Llama a la función que genera el ataque del enemigo.
¿Por qué llamar una función dentro de otra en JavaScript? Porque permite encadenar comportamientos sin crear nuevos eventos. Si dos acciones siempre ocurren juntas, una puede invocar a la otra directamente.
¿Por qué evitar nombres iguales entre variable y función?
Al principio la función se llamaba ataqueEnemigo, igual que la variable global donde se guardaba el resultado. JavaScript se confunde y tú también.
La solución fue renombrar la función a ataqueAleatorioEnemigo y dejar la variable como ataqueEnemigo. Lo mismo pasó con mascotaAleatoria, que antes se llamaba ataqueAleatorio aunque guardaba mascotas, no ataques. Nombrar bien evita bugs silenciosos.
¿Cómo se generan los ataques aleatorios del enemigo?
La aleatoriedad se resuelve con la función aleatorio, que ya existía en el proyecto y devuelve un número entre dos límites. En este caso, entre 1 y 3.
Cada número representa un elemento:
Fuego.
Agua.
Tierra.
Es el mismo patrón de piedra, papel o tijera del curso de Freddy, solo que con los elementos del juego. Dentro de ataqueAleatorioEnemigo se crea la variable ataqueAleatorio con el número generado, y a partir de ahí los condicionales asignan el ataque correspondiente.
¿Cómo se estructuran los condicionales?
El flujo usa if, else if y else para cubrir las tres posibilidades sin redundar:
javascript
function ataqueAleatorioEnemigo() {
let ataqueAleatorio = aleatorio(1, 3);
El else final cierra la lógica: si no es 1 ni 2, solo queda 3, así que no hace falta otro else if. Menos código, mismo resultado.
¿Qué es una variable global en JavaScript? Es una variable declarada fuera de cualquier función. Se puede leer y modificar desde cualquier parte del código, incluso desde la consola del navegador.
¿Cómo verificar que el código funciona desde la consola?
Al recargar la página y dar clic en fuego, agua o tierra, en pantalla no pasa nada visible. Eso es esperado: por ahora solo guardas valores en variables globales.
La prueba se hace en la consola del navegador. Si escribes ataqueJugador después de hacer clic en agua, devuelve Agua. Si escribes ataqueEnemigo, devuelve el ataque aleatorio que se generó en ese mismo clic. Cada clic actualiza ambos valores: el del jugador queda fijo según el botón, y el del enemigo cambia con cada llamada porque depende del número aleatorio.
Esto confirma tres cosas:
Las funciones encadenadas se ejecutan en orden.
Las variables globales conservan el último valor asignado.
La aleatoriedad funciona en cada clic, no solo la primera vez.
Lo que falta es traducir todo esto en mensajes visibles para el jugador, porque pedirle a alguien que abra la consola para jugar no es opción. Cuéntame en los comentarios cómo resolviste tú esta parte antes de ver la solución.
