Métodos de clase para pintar enemigos en Canvas

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:16

Métodos de clase para pintar enemigos en Canvas

Curso Gratis de Programación Básica 2022

Clase 66 de 84

Clase 66 / 84

Recursos

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.

Comentarios (109)109 comentarios

César Luis Amundaray Rodríguez

Hace 4 años

Cuando el valor de una propiedad de un objeto es una función se le llama: método.

El método, entonces, es una función que está asociada a un objeto.

Irving Caamal

Que buena y clara explicación

Diego Alejandro Moreno Pedroza

Sí señor, muchas gracias!

Felipe sanchez

si ponen la funcion aleatorio en el constructor de la clase mokepon, en las cordenadas X y Y, los mokepones salen aleatorios.

this.x= aleatorio(0,320) this.y= aleatorio(0,240)

Eduardo Peña Ramos

Buen tip para darle más emoción al juego.

Esta opción está mucho mejor, gracias!

Ignacio Mora

va tomando forma 😁

Andres Steven Galindo Satizabal

Te esta quedando súper bro

gracias! :D

Anyilo José Rangel Arias

Aquí les dejo las cabezas de nuestros Mokepones

Marcos Monteverde

jjajaj que bueno!!

Jonathan Fernando Ramirez Valencia

no deja descargar como png, sale como web

Oscar Humberto Godínez Paiz

Por personalizar a mis mascotas ![](

Me tocó improvisar cabezas jajaja. ![](

carlos carreño

Hace 3 años

le dio ansiedad el diseño de las cabezas jajaja que chimba de personajes jaja

José Torres

Difícilmente se puede seguir el curso sin conocimientos anteriores. Se pasa por encima de muchas cosas, que se dan x conocidas.

Alejandro Barros Vivanco

Ufff yes , pero ojo es gratis , es un regalo tremendo y enorme de conocimiento creo yo :)

Juan Camilo Sierra

Nadie tiene las cabezas de los otros 3 mokepones del reto anterior ??? Por ahora en mi caso deje para la cabeza y el cuerpo, la misma imagen (Me refiero a langostelvis, pydos y tucapalma...)

Noel Saavedra

Me paso igual, especialmente porque usé imágenes externas para tener algo de diferenciación respecto al juego de platzi

Alejandro Castro

Bueno!!!!!!! . Hay vamos... .

. Que gran avance!!!!!

muy bueno!!

Diego Jurado

Tremendo Nivel!

Danny Yulieth Peña Dimate

Agustín Comolli

Mi mapa:

Está super genial!!

quedo genial!! 👏

Kevin Alexis Rondon Gonzalez

Wowow este curso básico no esta tan básico después de todo espero seguir mas adelante aprendiendo y no sentirme mas perdido con las demás cursos de JS

Kevin Daniel Hincapie Lumbaque

Quisiera compartirles un poco de como yo he ido haciendo este proyecto a mi manera con las bases del curso.

Yo puse todos mis objetos de personaje en un array, esto me permite usar los índices de cada personajes para toda la lógica del juego

let invocaciones = [sammy, amalthea, ashley];

Tambien tengo una funcion para crear otro array pero con los enemigos, esta función se activa luego de que nuestro usuario escoja personaje (no quiero tener que luchar contra mi propio personaje :p)

let enemigos
function IndiceEnemigos (){
    enemigos = invocaciones.filter(function(pj){
        return pj.nombre != invocaciones[indiceInvocacion_p1].nombre
    })
}

-Por último use nuestra función para crear números aleatorios en la posición donde sale cada personaje, así se evita que salgan siempre en el mismo sitio ( lo que sí hice fue limitar una zona para cada personaje porque aunque es aleatorio salían muy cerca algunas veces) PD: los rangos van según el tamaño de nuestro canva teniendo en cuenta el tamaño de las imágenes también.

invocaciones[1].x = aleatorio(200,500);
invocaciones[1].y = aleatorio(150,350);

Jhon Deiby Salazar Rayo

Así va quedando :3

David Muñoz Sáez

Bueno, realmente es como sigue: Propiedad es una función del objeto que establece o devuelve un valor, como Color. Método es una función que puede no retornar un valor, pero que ejecuta una acción, como MoverDerecha(espacios), o Dibujar. Evento es una función que es llamada por el propio objeto y queda disponible para que el programador la aproveche si lo necesita, como CambioColor (colorAnterior), CambioPosición(PosicionAnterior), SeAgregoUnAtaque(NuevoAtaque), Click, Drag...

Alejandro Barriga Gasca

vamos!!!

Esta quedando chido :)

Daniel Joaquín Orjuela Holguín

El en reto de la ultima clase del anterior modulo, nos pidieron agregar los 3 mokepones restantes, pero aqui solo dan el rostro de los 3 iniciales

Aprovechando la función Aleatorio que ya tenemos, coloqué cada Mokepón en un lugar al azár: let hipodoge = new Mokepon('Hipodoge','./assets/Hipodoge.png',0,'./assets/Hipodoge.png',aleatorio(10,630), aleatorio(10,470)) /* Aquí aún no se ha definido el Canvas, así que use las dimensiones de pantalla (640x480) menos 10, para que todos estén en el mapa, pero esto se puede mejorar...

Luego, los pinto todos con un ciclo en la función correspondiente: mokepones.forEach((moke) => { moke.dibujar() })

Anderson Álvarez

pensé que iba a dejar el curso, la clase pasada no podía continuar, luego descubrí el error y pude seguir.😁😁

Demian Lett

Hace 2 años

Ojala ya te hayas recibido y estés trabajando de esto.

Javier Guevara

Yo le agregué un poco de picante 🔥 para que la posición de los enemigos sea aleatoria.

let hipodoge = new Mokepon('Hipodoge','./assets/mokepons_mokepon_hipodoge_attack.png', 5, './assets/hipodoge.png')
let capipepo = new Mokepon('Capipepo','./assets/mokepons_mokepon_capipepo_attack.png', 5, './assets/capipepo.png')
let ratigueya = new Mokepon('Ratigueya','./assets/mokepons_mokepon_ratigueya_attack.png', 5, './assets/ratigueya.png')
let hipodogeEnemigo = new Mokepon('Hipodoge','./assets/mokepons_mokepon_hipodoge_attack.png', 5, './assets/hipodoge.png', Math.random()*mapa.width, Math.random()*mapa.height)
let capipepoEnemigo = new Mokepon('Capipepo','./assets/mokepons_mokepon_capipepo_attack.png', 5, './assets/capipepo.png', Math.random()*mapa.width, Math.random()*mapa.height)
let ratigueyaEnemigo = new Mokepon('Ratigueya','./assets/mokepons_mokepon_ratigueya_attack.png', 5, './assets/ratigueya.png', Math.random()*mapa.width, Math.random()*mapa.height)

MARTÍN ALBERTO CAB QUÉN

Buena idea, ya lo puse en práctica.

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero