Darle vida visual a un juego implica mucho más que dibujar rectángulos sobre un lienzo. En esta sesión se aborda cómo redimensionar el canvas, cargar una imagen de fondo para el mapa y, sobre todo, cómo reemplazar una mascota fija por la que el jugador realmente seleccionó. Todo esto usando JavaScript puro y el API de Canvas.
¿Cómo redimensionar el canvas y agregar una imagen de fondo?
El primer paso es ajustar las dimensiones del canvas dentro de la función iniciarMapa. Se asignan nuevos valores a las propiedades width y height del elemento [0:18]:
javascript
mapa.width = 800;
mapa.height = 600;
Sin embargo, tras una primera prueba visual, esas dimensiones resultan demasiado grandes. Por eso se reducen a 320 de ancho y 240 de alto [1:30], logrando un tamaño más adecuado para el juego.
Para el fondo, se crea una variable llamada mapaBackground que instancia un objeto new Image(). Después se le asigna su src apuntando al archivo MoqueMap.png ubicado en la carpeta de assets [0:35]:
javascript
let mapaBackground = new Image();
mapaBackground.src = './assets/MoqueMap.png';
¿Dónde se dibuja el fondo dentro del ciclo de pintado?
Dentro de la función que repinta el canvas en cada frame, justo después de limpiar el lienzo con clearRect, se invoca drawImage. Este método recibe la imagen, las coordenadas de inicio (0, 0) —la esquina superior izquierda— y el ancho y alto del mapa para que cubra todo el lienzo [1:05]:
javascript
ctx.drawImage(mapaBackground, 0, 0, mapa.width, mapa.height);
Un detalle importante: la función originalmente se llamaba pintarPersonaje, pero dado que ahora dibuja todo el canvas (fondo, mascota, enemigos), se renombra a pintarCanvas. Para hacer esto de forma eficiente se usa el atajo Ctrl + F, que permite buscar y reemplazar todas las coincidencias del texto seleccionado en el editor [0:55].
¿Cómo pintar la mascota que el jugador seleccionó en lugar de una fija?
Hasta este punto, el código siempre dibujaba a Capi Pepo sin importar la elección del usuario. La solución es obtener el objeto completo de la mascota seleccionada, no solo su nombre.
Se crea una función llamada obtenerObjetoMascota que itera sobre el array de moquepones con un ciclo for. Cuando el nombre coincide con mascotaJugador, retorna el objeto en esa posición [2:35]:
javascript
function obtenerObjetoMascota() {
for (let i = 0; i < moquepones.length; i++) {
if (moquepones[i].nombre === mascotaJugador) {
return moquepones[i];
}
}
}
¿Por qué conviene almacenar el objeto en una variable global?
Como esa función se usa en muchas partes —funciones de movimiento, de dibujo, de actualización—, tiene más sentido guardar el resultado en una variable declarada al inicio del archivo: mascotaJugadorObjeto [3:25]. Se le asigna su valor dentro de iniciarMapa:
javascript
mascotaJugadorObjeto = obtenerObjetoMascota();
Después, cada referencia a Capi Pepo se sustituye por mascotaJugadorObjeto. Esto aplica en:
- La función
pintarCanvas, donde se usa drawImage.
- Las funciones de movimiento:
moverDerecha, moverArriba, entre otras.
- La lógica de actualización de posición.
¿Qué error común aparece al reorganizar el código y cómo se resuelve?
Al probar en el navegador seleccionando a Hippodutch, el juego falla. La consola muestra que no puede leer la propiedad X en pintarCanvas ni en las funciones de movimiento [4:20]. Usando console.log se descubre que tanto mascotaJugador como mascotaJugadorObjeto son undefined.
El problema es un error de orden de ejecución: iniciarMapa se estaba llamando antes de que mascotaJugador recibiera su valor en la función de selección. La solución es mover la llamada a iniciarMapa para que ocurra después de asignar el nombre de la mascota [5:20].
Un tip útil para depurar: dentro de un console.log, si usas coma en lugar de concatenación, puedes imprimir varias variables seguidas de forma limpia [4:55].
Tras corregir el orden, el objeto se imprime correctamente con todos sus datos: alto, ancho, ataques, foto y demás propiedades de la clase. Ya es posible seleccionar cualquier mascota —Hippodutch, Ratihüella o la que sea— y verla renderizada sobre el mapa con su imagen real.
¿Te ha pasado que un error de orden de ejecución te hizo perder tiempo? Comparte tu experiencia depurando en los comentarios.
