Si estás construyendo un juego en JavaScript y necesitas que el enemigo elija una mascota al azar, la clave está en dejar de escribir números fijos y empezar a usar la longitud del array como fuente de verdad. Así, cuando agregues nuevos personajes, el código se adapta solo sin que tengas que tocar la función cada vez.

Por qué evitar números fijos al generar valores aleatorios

Cuando escribes manualmente el rango de un Math.random, atas tu lógica a una cantidad específica de elementos. Si hoy tienes tres mascotas y mañana sumas mil, tendrías que volver a la función y cambiar el número a mano. Eso no escala.

La solución es apoyarte en el array que ya contiene a todos los personajes, en este caso mokepones, y dejar que él te diga cuántos elementos hay. A esto se le llama tener una single source of truth: un solo lugar desde donde se controla la información.

¿Qué es una fuente única de verdad en programación? Es un único lugar del código donde vive un dato. Si necesitas usarlo en otras partes, lo consultas desde ahí en vez de duplicarlo. Así, cuando el dato cambia, todo se actualiza automáticamente.

Cómo usar .length para definir el rango aleatorio

Todo array en JavaScript tiene una propiedad llamada length que devuelve cuántos elementos contiene. Si tu arreglo mokepones tiene tres personajes, mokepones.length te devuelve 3.

Esa propiedad la puedes inyectar directamente en tu generador aleatorio. La estructura queda así:

javascript let mascotaAleatoria = aleatorio(0, mokepones.length - 1)

Fíjate en el detalle del - 1. Como los índices de un array empiezan en cero, un arreglo de tres elementos tiene posiciones 0, 1 y 2. Si pides hasta length, te pasarías al índice 3, que no existe. Por eso siempre restas uno para mantenerte dentro del rango válido.

Cómo acceder a un elemento por su índice

Una vez que tienes el número aleatorio, lo usas para extraer el personaje correspondiente del array:

javascript mascotaJugadorEnemigo = mokepones[mascotaAleatoria]

Esto le dice a JavaScript: del array mokepones, dame el elemento que está en la posición indicada. Si el aleatorio fue 0, te devuelve el primer personaje; si fue 2, el tercero. Es la misma lógica que usarías para leer cualquier valor de un arreglo cuando ya sabes su posición.

Cómo imprimir el nombre del personaje en el HTML

Al probar la función aparece un problema común: en la pantalla no se ve el nombre del personaje, porque la variable estaba ligada a un id de HTML, no al texto que queremos mostrar.

Para resolverlo, accedes a la propiedad nombre del objeto seleccionado y la asignas al contenido del elemento HTML con innerHTML:

javascript spanMascotaEnemigo.innerHTML = mascotaJugadorEnemigo.nombre

Con esa línea, el span correspondiente muestra el nombre real del personaje que el enemigo eligió. Lo importante aquí es entender que estás recorriendo dos capas: primero seleccionas un objeto del array y luego entras a una de sus propiedades.

¿Por qué se usa innerHTML en lugar de igualar la variable directamente? Porque la variable apunta a un nodo del DOM, no a su texto. Con innerHTML le indicas al navegador qué contenido debe mostrar dentro de ese nodo.

Qué ganas al usar objetos en lugar de validaciones manuales

Antes, la función necesitaba un bloque de validaciones para traducir el número aleatorio en un nombre de personaje. Al usar el array de objetos, eso desaparece. La función queda más corta, más limpia y, sobre todo, preparada para crecer.

Estos son los beneficios concretos del cambio:

• Eliminas validaciones tipo if/else que solo servían para mapear números a nombres.
• El enemigo elige siempre dentro del mismo universo de personajes que el jugador.
• Si agregas un nuevo mokepón al array, la lógica de selección lo incluye automáticamente.
• Reduces el riesgo de bugs por olvidar actualizar un rango numérico.

El siguiente reto aparece justo cuando ya funciona la selección: en el HTML hay tres botones de ataque fijos, pero cada personaje tiene ataques distintos. ¿Cómo inyectar dinámicamente los ataques correctos según la mascota elegida? Cuéntame en los comentarios cómo lo resolverías tú antes de seguir con la siguiente clase.