Construir personajes para un juego implica mucho más que asignar nombres y valores sueltos. Cuando trabajas con clases y objetos en JavaScript, organizas tu código de forma limpia, reutilizable y lista para crecer. Aquí se explica paso a paso cómo definir una clase, establecer sus propiedades y generar múltiples objetos a partir de ella, todo aplicado a un proyecto de juego con personajes llamados Moquepones.
¿Cómo se define una clase en JavaScript?
Para crear una clase se utiliza la palabra reservada class seguida del nombre, que siempre debe iniciar con mayúscula [0:42]. Esa es la convención que diferencia a una clase de una variable común. Dentro de la clase se abre un bloque con llaves donde vivirá toda su estructura interna.
¿Qué hace el constructor dentro de una clase?
El constructor es una función especial que define las propiedades que tendrá cada objeto creado a partir de la clase [1:05]. En el caso del Moquepon, las propiedades elegidas son:
- nombre: identifica al personaje.
- foto: la URL de la imagen que se muestra en pantalla.
- vida: un valor numérico que representa la salud del personaje.
Dentro del constructor se usa la palabra reservada this, que hace referencia a la propia instancia de la clase [2:02]. Al escribir this.nombre = nombre, se asigna el valor recibido como parámetro a una variable interna del objeto. Lo mismo aplica para this.foto y this.vida.
¿Cómo se crea un objeto a partir de la clase?
Una vez definida la clase, se genera un objeto con la palabra reservada new [3:16]. Esta instrucción le indica a JavaScript que construya una nueva instancia de la clase indicada. Por ejemplo:
javascript
let hipodogue = new Moquepon('Hipodogue', './assets/hipodogue.png', 5);
Cada parámetro corresponde al orden establecido en el constructor: primero el nombre, luego la URL de la foto y finalmente la vida. El editor de código incluso sugiere los parámetros esperados una vez que reconoce la clase [3:30].
¿Cómo verificar que el objeto se creó correctamente?
Para comprobar que todo funciona se utiliza console.log, una herramienta que imprime mensajes o valores directamente en la consola del navegador [4:22]. Al pasar la variable del objeto como argumento, la consola muestra la clase a la que pertenece y cada una de sus propiedades con sus valores asignados.
- Al expandir el resultado en la consola, aparecen nombre, foto y vida con los datos correctos.
- También se muestra el prototype, que indica que el elemento es de tipo objeto [4:50].
Esto confirma que la clase está bien definida y el objeto se instanció sin errores.
¿Cómo crear múltiples objetos con la misma clase?
La ventaja principal de las clases es la reutilización. Para agregar más personajes, basta con repetir el patrón usando new y cambiando los valores de cada instancia [5:18]:
javascript
let capipepo = new Moquepon('Capipepo', './assets/capipepo.png', 5);
let ratigueya = new Moquepon('Ratigueya', './assets/ratigueya.png', 5);
Cada variable almacena un objeto independiente con sus propias propiedades. Si más adelante necesitas agregar más características, como ataques, solo tienes que ampliar el constructor y actualizar los objetos [7:08].
¿Qué son los arreglos y por qué los necesitas?
Cuando tienes tres objetos y quieres acceder a todos desde una sola referencia, imprimir uno por uno no es práctico. Los arreglos permiten agrupar múltiples elementos en una sola variable [6:24]. En lugar de hacer tres console.log separados, un arreglo contiene los tres Moquepones y facilita operaciones como recorrerlos, filtrarlos o mostrarlos dinámicamente en pantalla.
Este concepto resulta fundamental para escalar el proyecto, ya que conforme crezcan las propiedades y la cantidad de personajes, los arreglos serán la estructura que mantenga todo organizado.
Si ya lograste crear tu primera clase y tus primeros objetos, el siguiente paso natural es experimentar agregando nuevas propiedades al constructor y practicando con console.log para inspeccionar los resultados. ¿Qué propiedades adicionales le pondrías a tus personajes?
