Aprender a pintar enemigos dentro de un canvas usando métodos de clase en JavaScript es un paso fundamental para que tu juego comience a lucir como uno de verdad. Aquí se explica cómo transformar una función suelta en un método reutilizable dentro de una clase, cómo usar parámetros con valores por defecto y cómo organizar el código para que cada personaje se dibuje en su propia posición.
¿Cómo preparar la clase Moquepon para recibir posiciones dinámicas?
La clase Moquepon ya contaba con atributos como x, y, ancho y alto. El primer cambio consiste en hacer que X e Y lleguen como parámetros al constructor en lugar de estar fijos [01:07]. De esta forma, cada instancia puede aparecer en una posición distinta del mapa.
Además, se agrega un nuevo atributo llamado fotoMapa, que corresponde a las imágenes pequeñas de la cabeza de cada personaje, los avatars que se muestran dentro del canvas [01:30].
¿Qué son los parámetros con valores por defecto?
Cuando defines una función o un constructor, puedes asignar un valor por defecto a sus parámetros [02:00]. Esto significa que si al momento de llamar la función no envías ese argumento, se usará el valor predefinido.
javascript
constructor(nombre, foto, fotoMapa, x = 10, y = 10) {
this.x = x;
this.y = y;
}
- Si no pasas
x ni y, ambos tomarán el valor 10.
- Si los pasas, se usarán los valores que indiques.
Esto resulta muy práctico: los personajes del jugador arrancan en la posición por defecto, mientras que los enemigos reciben coordenadas específicas para distribuirse por el mapa [02:25].
¿Cómo se crean los enemigos con posiciones personalizadas?
Se duplican las instancias existentes y se les asignan nuevas coordenadas [03:18]:
javascript
let aipodosEnemigo = new Moquepon("Aipodos", "...", "./assets/aipodos.png", 80, 120);
let capipepoEnemigo = new Moquepon("Capipepo", "...", "./assets/capipepo.png", 150, 95);
let ratiguellaEnemiga = new Moquepon("Ratigüella", "...", "./assets/ratiguella.png", 200, 190);
Cada enemigo aparece en un punto diferente del mapa gracias a los valores de x e y que se pasan al constructor.
¿Qué son los métodos de una clase y por qué usarlos?
Un método de clase es una función definida dentro de la clase que opera sobre los atributos de cada instancia usando la palabra clave this [04:20]. Así como el constructor inicializa los datos, los métodos permiten ejecutar comportamientos propios del objeto.
Antes, el código para dibujar al personaje estaba suelto dentro de la función pintarCanvas:
javascript
lienzo.drawImage(mascotaJugadorObjeto.foto, mascotaJugadorObjeto.x, mascotaJugadorObjeto.y, mascotaJugadorObjeto.ancho, mascotaJugadorObjeto.alto);
Al convertirlo en un método llamado pintarMoquepon, el código queda encapsulado dentro de la clase [04:45]:
javascript
pintarMoquepon() {
lienzo.drawImage(this.fotoMapa, this.x, this.y, this.ancho, this.alto);
}
this.fotoMapa apunta a la imagen del avatar de esa instancia.this.x y this.y determinan dónde se dibuja.this.ancho y this.alto controlan el tamaño.
¿Cómo se invoca el método para cada personaje?
Dentro de la función pintarCanvas basta con llamar al método sobre cada objeto [05:20]:
javascript
mascotaJugadorObjeto.pintarMoquepon();
aipodosEnemigo.pintarMoquepon();
capipepoEnemigo.pintarMoquepon();
ratiguellaEnemiga.pintarMoquepon();
Cada instancia ejecuta la misma lógica pero con sus propios datos. Esa es la ventaja de los métodos: escribes el código una sola vez y lo reutilizas en todos los objetos.
¿Por qué los enemigos aparecían apilados y cómo se resolvió?
Al probar en el navegador, todos los personajes se dibujaban en la misma posición [05:52]. El problema era que dentro del constructor se asignaba un valor fijo a this.x en lugar de usar el parámetro x que llegaba. Al corregir la asignación para que tome el parámetro recibido, cada enemigo se ubica correctamente [06:15].
Este error es un recordatorio importante: cuando un parámetro aparece atenuado en el editor, significa que no se está utilizando, lo cual suele indicar un bug.
Con estos cambios el mapa muestra al personaje del jugador, los tres enemigos distribuidos y un background completo. El siguiente paso natural es trabajar con colisiones, es decir, detectar cuándo un personaje choca con otro y reaccionar ante ese evento. ¿Qué lógica usarías tú para detectar esas colisiones? Comparte tu enfoque en los comentarios.
