Aprende a darle vida a un juego en JavaScript añadiendo un fondo al canvas y pintando dinámicamente la mascota seleccionada por el jugador. Esta guía te muestra cómo manipular imágenes con drawImage, ajustar el tamaño del lienzo y refactorizar funciones para usar el objeto completo de la mascota en vez de un valor fijo.
Cómo defines el tamaño del canvas y cargas la imagen de fondo
El primer paso es ampliar el lienzo para que tu mapa tenga espacio suficiente. Dentro de la función iniciarMapa, asignas mapa.width = 800 y mapa.height = 600 [01:00]. Después cargas la imagen del fondo creando una nueva instancia de Image y apuntando su src al archivo mokemap.png que vive en la carpeta assets.
javascript
let mapaBackground = new Image()
mapaBackground.src = './assets/mokemap.png'
¿Qué hace new Image() en JavaScript? Crea un objeto de imagen en memoria que puedes pintar en el canvas cuando esté listo, sin necesidad de insertarlo en el HTML.
Una vez cargada, esa imagen se dibuja con drawImage desde la coordenada (0, 0) y ocupando el ancho y alto totales del mapa. Así el fondo cubre el lienzo completo.
Por qué conviene renombrar la función pintarPersonaje
La función original se llamaba pintarPersonaje, pero en realidad pinta todo el lienzo: el fondo, la mascota y más adelante a los enemigos. Renombrarla a pintarCanvas describe mejor lo que hace y mejora la lectura del código [02:30].
Un truco útil aquí es usar Ctrl + F para buscar todas las coincidencias del nombre y reemplazarlas rápidamente. Es un detalle pequeño que te ahorra errores cuando refactorizas.
Cómo ajustas el tamaño del canvas para que se vea proporcionado
Después de probar con 800 x 600, el lienzo se veía demasiado grande en pantalla. La solución fue reducirlo a 320 de ancho y 240 de alto, una proporción que mantiene el estilo retro del juego y permite ver el mapa completo sin hacer scroll [03:45].
Guardas, refrescas el navegador y el mapa ya luce con su fondo en un tamaño cómodo. Sencillo, pero marca la diferencia visual.
Cómo obtienes el objeto completo de la mascota seleccionada
Hasta este punto, el código pintaba siempre a Capipepo por defecto. La meta ahora es pintar la mascota que el jugador eligió en la pantalla inicial. Para eso necesitas el objeto completo del Mokepón, no solo su nombre.
La solución reutiliza la lógica del for que ya existía para obtener los ataques. Se extrae a una nueva función llamada obtenerObjetoMascota, que recorre el array de Mokepones y devuelve el objeto que coincide con la mascota seleccionada [05:30].
javascript
function obtenerObjetoMascota() {
for (let i = 0; i < mokepones.length; i++) {
if (mascotaJugador === mokepones[i].nombre) {
return mokepones[i]
}
}
}
¿Para qué sirve un for que retorna un objeto? Te permite buscar dentro de un array y devolver el elemento exacto que coincida con un criterio, en vez de solo una propiedad suelta.
Cómo conviertes la función en una variable global reutilizable
Como esa función se usa en muchos lugares (movimiento, dibujo, colisiones), tiene más sentido guardar el resultado en una variable: mascotaJugadorObjeto. Se declara junto a mascotaJugador al inicio del archivo y se le asigna valor dentro de iniciarMapa.
Después sustituyes todas las apariciones de capipepo por mascotaJugadorObjeto en las funciones de movimiento (moverDerecha, moverArriba, etc.) y en pintarCanvas. Cada referencia ahora apunta a la mascota real elegida por el jugador.
Por qué aparece el error undefined al cargar el mapa
Al probar en el navegador, la consola arrojó: cannot read X in pintarCanvas. El console.log mostró que tanto mascotaJugador como mascotaJugadorObjeto estaban en undefined [09:15].
La causa: el mapa se inicializaba antes de que el jugador seleccionara su mascota. La solución fue mover la llamada a iniciarMapa para que ocurra después de la selección, dentro del método donde se asigna mascotaJugador.
¿Por qué da undefined una variable en JavaScript? Porque la estás leyendo antes de que se le asigne un valor. El orden de ejecución importa: asigna primero, lee después.
Un truco práctico: en console.log puedes imprimir varios valores separados por coma, lo que facilita comparar estados en una sola línea de depuración.
Qué contiene el objeto completo de un Mokepón
Una vez corregido el orden, la consola imprime el objeto completo de la mascota, que incluye:
- Nombre del Mokepón.
- Foto asociada.
- Ancho y alto para dibujarlo en el canvas.
- Array de ataques disponibles.
- Coordenadas de posición (
x, y).
Probar con Hypodoge y luego con Ratigueya confirma que ahora cualquier mascota seleccionada aparece correctamente sobre el fondo del mapa [12:00].
¿Ya lograste pintar tu mascota sobre el mapa? Cuéntame en los comentarios qué Mokepón elegiste y si te topaste con algún undefined en el camino.
