Pintar enemigos en un juego con Canvas se vuelve mucho más limpio cuando usas métodos de clase en JavaScript. Aquí aprendes a refactorizar el código de un Moquepón para que cada instancia sepa dibujarse a sí misma usando this, parámetros por defecto y un array de enemigos con posiciones fijas.

¿Cómo agregar parámetros y valores por defecto al constructor?

El primer paso es darle flexibilidad a la clase Moquepón para que cada instancia pueda recibir su propia posición y avatar de mapa, pero sin obligarte a pasarlos siempre.

Dentro del constructor, los atributos x y y pasan a recibirse como parámetros, junto con un nuevo atributo llamado fotoMapa que apunta a las imágenes de cabeza ubicadas en la carpeta de recursos. El ancho, el alto y la velocidad se mantienen igual.

La clave está en los valores por defecto de los parámetros. Cuando defines algo como x = 10 y y = 10 en la firma de la función, le estás diciendo al motor: si no te pasan nada, usa diez. Si te pasan algo, usa lo que te llegue.

¿Qué son los parámetros por defecto en JavaScript? Son valores que una función usa cuando no recibe ese argumento al ser llamada. Se declaran con la sintaxis parametro = valor en la firma de la función.

Así, al instanciar Hypodoge, Capipepo y Ratigueya sin posición, todos arrancan en (10, 10), pero los enemigos sí reciben coordenadas específicas. [01:50]

¿Qué son los métodos de clase y cómo convertir una función en método?

Los métodos son funciones que viven dentro de una clase y operan sobre los atributos de cada instancia. Aquí es donde entra this.

Antes, el código tenía una función pintarCanvas que llamaba a lienzo.drawImage usando mascotaJugadorObjeto.x, mascotaJugadorObjeto.fotoMapa, etc. El problema: si quieres pintar tres enemigos más, tendrías que repetir ese bloque cuatro veces.

La solución es mover ese drawImage dentro de la clase como un método llamado pintarMoquepon. Dentro del método, cada referencia a mascotaJugadorObjeto se reemplaza por this, porque ahora hablas del objeto actual, sea Hypodoge, Capipepo o Ratigueya.

¿Qué hace this dentro de un método de clase? Apunta a la instancia que está ejecutando el método. Si llamas capipepo.pintarMoquepon(), this es Capipepo y sus atributos.

Después de declarar el método, pintar a cualquier Moquepón se reduce a una línea:

javascript mascotaJugadorObjeto.pintarMoquepon()

Eso es polimorfismo en acción: el mismo método, comportamientos distintos según los datos de cada instancia. [03:30]

¿Cómo crear un array de enemigos con posiciones fijas en Canvas?

Con el método listo, toca duplicar las instancias para los enemigos y ubicarlos en el mapa.

Se crean tres nuevas variables: hypodogeEnemigo, capipepoEnemigo y ratigueyaEnemigo. A diferencia del personaje del jugador, aquí sí pasas coordenadas concretas para que no se encimen en el origen del mapa.

• Hypodoge enemigo arranca en x=80, y=120.
• Capipepo enemigo arranca en x=150, y=95.
• Ratigueya enemiga arranca en x=200, y=190.

Después, dentro de la función que pinta el canvas, llamas a pintarMoquepon() sobre cada enemigo. Tres líneas, tres enemigos dibujados.

El bug del this.x mal asignado

Al probar en el navegador, todos los enemigos aparecían encimados en la misma posición. ¿Por qué? El editor mostraba los parámetros x y y con un color más tenue, señal de que no se estaban usando.

El error estaba en el constructor: this.x seguía recibiendo un valor fijo en vez del parámetro x. Al cambiar this.x = x y this.y = y, cada enemigo respeta su coordenada y aparece en su lugar correcto sobre el mapa. [06:40]

Ajuste visual del tamaño

Las imágenes de los avatares cargaban demasiado grandes con el ancho y alto en 80 píxeles. Bajarlos a 40 deja a los Moquepones a una escala adecuada respecto al fondo del mapa.

¿Por qué conviene usar métodos en lugar de funciones sueltas?

Mover el dibujo a un método dentro de la clase tiene tres ventajas concretas que se notan cuando el juego crece.

• Reutilización: un solo método sirve para el jugador y para todos los enemigos.
• Encapsulamiento: la lógica de cómo se pinta un Moquepón vive junto con sus datos.
• Mantenimiento: si cambias cómo se dibuja, lo tocas en un solo lugar.

Con esta refactorización, el mapa ya muestra al personaje del jugador, tres enemigos en posiciones fijas y un fondo que lo hace ver como un juego real. El siguiente paso natural son las colisiones, detectar cuándo un personaje choca contra otro y disparar una acción.

¿Ya intentaste agregar un cuarto enemigo con tus propias coordenadas? Cuéntame en los comentarios dónde lo ubicaste.