Dibujar en HTML5 con la etiqueta canvas es la base para crear juegos en el navegador, y aquí vas a ver cómo aplicarla al proyecto Moquepones para mostrar un mapa donde se moverá tu mascota. La idea es sencilla: insertas un canvas, obtienes su contexto en JavaScript y empiezas a pintar formas o imágenes encima.
¿Qué es la etiqueta canvas y cómo funciona su sistema de coordenadas?
La etiqueta canvas dibuja un espacio rectangular dentro de tu página web sobre el que puedes pintar usando JavaScript. Piensa en ella como un lienzo digital con su propio plano cartesiano, pero con una particularidad importante.
El origen (0,0) no está en el centro ni abajo, está en la esquina superior izquierda. Desde ahí cuentas hacia la derecha para el eje X y hacia abajo para el eje Y, siempre con números positivos medidos en píxeles.
Por ejemplo, si quieres ubicar el punto (2,1), te mueves dos píxeles a la derecha y un píxel hacia abajo. Si quieres ubicar (4,5), te mueves cuatro a la derecha y cinco hacia abajo. Esa lógica la vas a usar para colocar líneas, círculos, rectángulos, texto e imágenes [01:30].
¿Dónde está el punto (0,0) en un canvas? En la esquina superior izquierda. El eje X crece hacia la derecha y el eje Y crece hacia abajo, ambos en píxeles positivos.
¿Cómo agregar un canvas al HTML del proyecto Moquepones?
Después de la sección donde se selecciona la mascota, creas una nueva sección con el identificador verMapa. Dentro pones un título tipo "Explora el mapa con tu Moquepon" y, debajo, la etiqueta canvas con el id mapa para poder acceder a ella desde JavaScript [03:10].
En el archivo JavaScript declaras dos constantes nuevas:
sectionVerMapa con document.getElementById('verMapa').mapa con document.getElementById('mapa'), que será el elemento canvas.
Luego ajustas la lógica del juego para que, al iniciar, ya no se muestre la sección de ataques sino la del mapa. Cambias el display de la sección de ataques a none y el de sectionVerMapa a flex [04:20].
¿Cómo centrar el canvas con CSS?
En la hoja de estilos, sobre el identificador verMapa, agregas:
display: flex para activar el modelo flexible.flex-direction: column para apilar los elementos verticalmente.align-items: center y justify-content: center para centrar todo.
Al canvas con id mapa le pones un borde sólido de 2 píxeles en blanco para visualizar dónde queda dibujado el lienzo dentro de la página [05:40].
¿Cómo obtener el contexto 2D del canvas en JavaScript?
Un canvas vacío no sirve de nada hasta que obtienes su contexto de dibujo. Ese contexto es el objeto que expone los métodos para pintar formas e imágenes.
Creas una variable llamada canvas y le asignas mapa.getContext('2D'). El parámetro '2D' indica que vas a trabajar en dos dimensiones, que es lo que necesitas para un mapa plano [06:30].
¿Qué hace getContext('2D')? Devuelve el contexto de dibujo bidimensional del canvas. Sin esa llamada no puedes ejecutar funciones como fillRect o drawImage.
¿Cómo dibujar un rectángulo con fillRect?
La función fillRect crea un rectángulo relleno dentro del canvas. Recibe cuatro parámetros: posición X, posición Y, ancho y alto.
Un ejemplo concreto del proyecto:
javascript
canvas.fillRect(5, 15, 20, 40);
Eso dibuja un rectángulo a 5 píxeles del borde izquierdo, 15 del superior, con 20 de ancho y 40 de alto. Es la forma más rápida de comprobar que tu contexto está funcionando bien [07:10].
¿Cómo cargar una imagen en el canvas con drawImage?
Una vez que ya pintas formas básicas, el siguiente paso es reemplazar ese rectángulo por la cara de Capipepo, la mascota del juego.
Primero creas una variable con new Image() y le asignas el atributo src (de source) apuntando a la foto de Capipepo, que ya está cargada dentro del objeto de la mascota. Luego cambias fillRect por drawImage, que recibe parámetros distintos.
El método drawImage necesita:
- La imagen que vas a dibujar.
- La posición X dentro del canvas.
- La posición Y dentro del canvas.
- El ancho con el que se mostrará.
- El alto con el que se mostrará.
En el ejemplo, Capipepo se dibuja en (20, 40) con un tamaño de 100 por 100 píxeles. Al refrescar el navegador, la mascota aparece dentro del lienzo lista para moverse [08:40].
Con esto ya tienes el canvas creado, el contexto 2D obtenido, una figura de prueba dibujada y la imagen de tu Moquepon en pantalla. ¿Qué otra mascota te gustaría animar primero en tu mapa? Cuéntame en los comentarios.
