Trabajar con arreglos dentro de objetos es uno de los pasos más útiles cuando construyes un juego como Mokepon en JavaScript. Aquí aprenderás cómo agregar ataques a cada personaje usando arrays, el método push y objetos literales, todo conectado a una clase que ya tienes definida.
La idea es simple: cada Mokepon necesita guardar varios ataques, y un solo valor no alcanza. Por eso entra el concepto de array como propiedad de un objeto, algo que vas a usar muchísimo cuando programes videojuegos o cualquier app con datos dinámicos.
¿Cómo declarar la propiedad ataques dentro de una clase?
Dentro de tu clase, justo después de la propiedad vida, declaras this.ataques = []. Los corchetes cuadrados le indican a JavaScript que esa propiedad es un array vacío, listo para recibir información más adelante.
No populas el arreglo dentro del constructor, porque la idea es inyectar los ataques desde fuera, usando push. Esto te da flexibilidad: cada instancia puede tener ataques distintos sin tocar la clase original.
¿Qué es un array en JavaScript? Es una estructura que guarda varios valores en una sola variable. Se declara con corchetes [] y puede contener números, textos, objetos o incluso otros arrays.
¿Cómo accedo a una propiedad específica de un objeto?
Cuando tienes un objeto como hipodogue, traer todo el objeto te muestra cada propiedad. Pero si solo necesitas una, usas la notación de punto: hipodogue.nombre, hipodogue.foto o hipodogue.ataques.
Esta forma de acceder es la base para interactuar con cualquier valor dentro de un objeto. Si pides hipodogue.ataques antes de inyectar nada, te devuelve un array vacío [], lo cual es totalmente esperado.
¿Cómo empujar valores a un array con push?
Con el camino hipodogue.ataques.push() ya tienes la puerta abierta para agregar ataques. Dentro del push, en lugar de meter un valor suelto, vas a inyectar un objeto literal con la información estructurada de cada ataque.
La diferencia entre un objeto instancia y un objeto literal es importante: el primero nace de una clase, el segundo lo construyes manualmente con llaves {} y pares clave-valor. Para los ataques, el literal es perfecto porque solo guarda datos.
¿Qué estructura debe tener cada ataque?
Cada ataque se construye como un objeto literal con dos propiedades clave:
- nombre: el emoji del ataque guardado entre comillas, por ejemplo 💧 para agua, 🔥 para fuego o 🌱 para tierra.
- id: el identificador del botón en HTML que se usará para validar el ataque dentro de la lógica del juego.
Los emojis funcionan como texto en JavaScript, así que puedes guardarlos dentro de comillas simples sin problema. Esto le da al juego un toque visual sin necesidad de imágenes adicionales.
¿Para qué sirve el id en cada ataque? Conecta el ataque con un botón específico del HTML. Cuando el jugador hace clic, el id permite validar qué ataque se eligió y continuar con la lógica del combate.
¿Cómo distribuir los ataques según el tipo de Mokepon?
Cada Mokepon tiene cinco ataques en total, distribuidos según su tipo elemental. La lógica es la siguiente:
- Hipodogue, tipo agua: tres ataques de agua, uno de tierra y uno de fuego.
- Capipepo, tipo tierra: tres ataques de tierra, uno de agua y uno de fuego.
- Ratigueya, tipo fuego: tres ataques de fuego, uno de agua y uno de tierra.
Replicas la estructura de push para cada Mokepon, cambiando solo los emojis y los id correspondientes. Al guardar el archivo, los cinco ataques se inyectan automáticamente en el array de cada personaje.
¿Cómo verifico que los ataques se guardaron correctamente?
Después de inyectar los ataques, puedes comprobarlo desde la consola del navegador. Escribes el nombre del objeto, por ejemplo hipodogue.ataques, y te devuelve un array con cinco objetos dentro.
Cada objeto muestra su nombre (el emoji) y su id (el botón asociado). Si abres el array, ves la estructura completa con los tres ataques de agua, el de fuego y el de tierra para Hipodogue.
Un detalle: si escribes ataque en lugar de ataques, JavaScript lanza un error porque la propiedad no existe con ese nombre. La consistencia entre el nombre declarado en la clase y el que usas al hacer push es obligatoria.
¿Por qué usar push en lugar de declarar el array lleno?
Usar push fuera del constructor te permite separar la definición de la clase de los datos específicos de cada personaje. La clase queda limpia, reutilizable, y los ataques se inyectan según el tipo de cada Mokepon.
Este patrón te será útil cuando trabajes con datos que cambian o crecen con el tiempo, como inventarios, listas de jugadores o cualquier colección dinámica.
Ahora viene el siguiente reto: en el HTML solo hay tres botones (agua, fuego, tierra), pero cada Mokepon tiene cinco ataques distintos. ¿Cómo harías para que cada personaje renderice sus propios ataques sin duplicar HTML manualmente? Cuéntame en los comentarios cómo lo resolverías antes de pasar a manipular el DOM con los datos de tus objetos.
