Si ya lograste que tu jugador eligiera mascota en Mokepon, falta el otro lado del combate: que JavaScript seleccione una mascota aleatoria para el enemigo. Aquí aprenderás a reutilizar una función de números aleatorios y a conectarla con el DOM para mostrar el resultado en pantalla.

Esta lógica es clave en cualquier juego por turnos: necesitas que el código decida por sí mismo qué adversario enfrentas, sin intervención del usuario.

¿Por qué reutilizar la función aleatorio de la clase anterior?

En la clase de piedra, papel o tijera con Freddy [02:00] ya existía una función llamada aleatorio que devuelve un número entre un mínimo y un máximo. En lugar de reescribirla, la copiamos al archivo mokepon.js porque la lógica es prácticamente igual: antes elegías entre tres jugadas, ahora eliges entre tres mascotas.

La reutilización de código es una habilidad central en programación. Cuando una función ya resuelve un problema general, lo eficiente es importarla, no duplicar esfuerzo.

¿Qué hace la función aleatorio en JavaScript? Recibe un valor mínimo y uno máximo, y devuelve un número entero al azar dentro de ese rango. Sirve para simular decisiones impredecibles, como el ataque de un enemigo o la mascota que te toca enfrentar.

¿Dónde debes llamar a seleccionarMascotaEnemigo?

El orden importa. La función seleccionarMascotaEnemigo debe ejecutarse justo después de que el jugador haya confirmado su mascota [05:30], nunca antes. Si la llamas antes, el enemigo aparecería sin que el usuario haya tomado su decisión, rompiendo el flujo del juego.

Dentro de seleccionarMascotaJugador, después de los condicionales que detectan qué input fue marcado, agregas la invocación a la nueva función. Así garantizas que ambas mascotas se muestren al mismo tiempo en pantalla.

¿Cómo se estructura la función seleccionarMascotaEnemigo?

La función necesita tres piezas:

• Una variable ataqueAleatorio que guarde el resultado de llamar a aleatorio(1, 3).
• Una cadena de condicionales if, else if, else que traduzca cada número en una mascota.
• Una referencia al elemento HTML donde se mostrará el nombre del enemigo.

El nombre ataqueAleatorio no es casualidad: comunica la intención del valor mejor que numeroAleatorio. Nombrar variables con propósito es una habilidad que diferencia código legible de código confuso.

¿Cómo conectar el resultado aleatorio con el DOM?

Igual que hiciste con spanMascotaJugador, necesitas crear spanMascotaEnemigo usando document.getElementById('mascota-enemigo') [09:15]. Ese span vive en tu HTML dentro del bloque que dice algo como "La mascota del enemigo tiene tres vidas".

Dentro de cada rama del condicional, asignas el nombre correspondiente con innerHTML:

• Si ataqueAleatorio === 1, escribes 'Hipodogue'.
• Si ataqueAleatorio === 2, escribes 'Capipepo'.
• Si no es ninguno de los anteriores, queda 'Ratigueya'.

Usar else en lugar de un tercer else if es válido porque el rango está cerrado entre 1 y 3. No hay un cuarto caso posible, así que el else cubre la única opción restante.

¿Por qué usar el doble igual en los condicionales? El operador == (o mejor ===) compara valores. Un solo = asignaría el número a la variable en vez de evaluar si son iguales, y el condicional siempre daría verdadero.

¿Qué pasa al probar el juego en el navegador?

Al recargar la página y elegir, por ejemplo, Capipepo, aparece tu mascota seleccionada y junto a ella el enemigo asignado por azar [12:40]. Si repites la selección varias veces con la misma mascota del jugador, verás que el enemigo cambia: a veces sale Hipodogue, otras Capipepo, otras Ratigueya. Esa variabilidad confirma que la aleatoriedad funciona.

Un detalle de pulido: revisa el texto del HTML para que diga "la mascota" y no "las mascota". Pequeños errores de copia se cuelan rápido cuando duplicas estructuras.

¿Qué habilidades ganaste en esta parte del proyecto?

Más allá del código, esta sección entrena varias competencias técnicas:

• Reutilización de funciones: importar lógica existente sin reescribirla.
• Manipulación del DOM: usar getElementById e innerHTML para reflejar estado en la interfaz.
• Control de flujo con condicionales: traducir un valor numérico en una decisión de negocio.
• Nombrado intencional de variables: pasar de numeroAleatorio a ataqueAleatorio para comunicar propósito.

Con la mascota del jugador y la del enemigo ya resueltas, el siguiente paso natural es la lógica de ataques, donde cada mascota tendrá movimientos propios y habrá que decidir quién gana cada turno. ¿Cómo crees que deberían estructurarse esos ataques? Cuéntalo en los comentarios.