Cuando construyes un juego donde el enemigo debe elegir un personaje de forma aleatoria, es fundamental que tu código se adapte automáticamente a los cambios en la lista de personajes. Aquí se trabaja con arreglos dinámicos y acceso por índice para eliminar valores manuales y mantener una sola fuente de verdad en tu proyecto.
¿Por qué evitar valores manuales en la selección aleatoria?
El problema central es claro: si defines manualmente el rango de números para generar una selección aleatoria, cada vez que agregues o elimines un personaje tendrás que modificar ese valor. Si hoy tienes tres personajes y mañana tienes mil, el mantenimiento se vuelve insostenible.
La solución es usar la propiedad .length del arreglo de moquepones [1:40]. Esta propiedad te devuelve automáticamente la cantidad de elementos que existen dentro del arreglo. Si el arreglo crece, el número cambia sin intervención manual.
javascript
let aleatorio = Math.floor(Math.random() * (moquepones.length - 1)) + 0;
moquepones.length retorna el número total de elementos del arreglo.- Se resta uno porque los índices en programación empiezan en cero [3:08].
- El rango resultante va de
0 hasta length - 1, cubriendo todos los personajes disponibles.
Este patrón garantiza que tu fuente de verdad sea siempre el arreglo original, sin duplicar datos ni hardcodear rangos.
¿Cómo acceder a un elemento específico dentro de un arreglo?
Una vez que tienes el número aleatorio, necesitas extraer el objeto correspondiente del arreglo. Para eso se usa la notación de corchetes con el índice [3:30].
javascript
let mascotaEnemigo = moquepones[aleatorio];
Si escribes moquepones[0], obtienes el primer elemento. Con moquepones[1], el segundo. Con moquepones[2], el tercero. El número aleatorio generado determina cuál personaje selecciona el enemigo.
¿Qué es el acceso por índice?
Cada posición dentro de un arreglo tiene un índice numérico que comienza en cero [3:08]. Esto es fundamental en JavaScript y en prácticamente todos los lenguajes de programación:
- Índice
0: primer elemento.
- Índice
1: segundo elemento.
- Índice
n-1: último elemento de un arreglo con n elementos.
Esta estructura permite que el código sea completamente dinámico. No importa cuántos personajes existan, el sistema siempre seleccionará uno válido.
¿Cómo mostrar el nombre del personaje enemigo en el HTML?
Al guardar el objeto completo en la variable, ya no necesitas una estructura condicional que asocie números con nombres. Solo accedes a la propiedad nombre del objeto seleccionado y la imprimes directamente [4:38].
javascript
spanMascotaEnemigo.innerHTML = mascotaEnemigo.nombre;
¿Qué papel juega innerHTML en la manipulación del DOM?
La propiedad innerHTML permite modificar el contenido de un elemento HTML desde JavaScript [4:50]. En este caso, se toma el elemento span identificado por su ID y se le asigna el valor del nombre del personaje enemigo.
- Se localiza el elemento HTML mediante su ID.
- Se usa
.innerHTML para inyectar el texto.
- El valor proviene directamente de la propiedad
nombre del objeto.
Con esto se elimina la validación manual anterior donde se comparaba el número aleatorio con cada posible nombre. Ahora el objeto contiene toda la información necesaria y solo hay que acceder a la propiedad correcta.
¿Qué significa tener una sola fuente de verdad?
Este concepto, conocido como single source of truth [5:26], implica que toda la información de los personajes vive en un único lugar: el arreglo de objetos. Cualquier parte del código que necesite datos de los moquepones consulta ese mismo arreglo.
- No se duplican nombres en condicionales.
- No se mantienen rangos numéricos manuales.
- Si agregas un personaje al arreglo, el resto del sistema lo reconoce automáticamente.
El siguiente reto que se presenta es cómo inyectar dinámicamente los ataques de cada personaje en los botones del HTML, ya que cada moquepon tiene ataques distintos. ¿Cómo resolverías tú la lógica para generar botones de ataque según el personaje seleccionado?
