Mover un personaje dentro de un canvas en JavaScript implica actualizar sus coordenadas y volver a pintarlo cada vez que cambia de posición. Aquí aprendes a controlar a Capipepo con un botón, usando atributos de clase, una función de pintado y la limpieza del lienzo para evitar rastros visuales.
Cómo agrego un botón para mover al personaje en HTML
Lo primero es darle al usuario una forma de interactuar. En el HTML creas una etiqueta <button> con el texto Mover y le asocias un evento onclick que llame a la función moverCapipepo. Ese botón será el disparador de todo el movimiento.
html
<button onclick="moverCapipepo()">Mover</button>
¿Para qué sirve el evento onclick en un botón? Conecta el clic del usuario con una función de JavaScript. Cuando alguien presiona el botón, se ejecuta el código que tú definiste, en este caso, mover al personaje cinco píxeles.
Qué atributos necesita la clase del personaje
Para mover algo, primero hay que saber dónde está. Por eso, dentro de la clase de Capipepo defines cuatro atributos clave que guardan su estado actual en el canvas [1:00].
- x: posición horizontal inicial, con valor 20.
- y: posición vertical inicial, con valor 30.
- ancho: 80 píxeles.
- alto: 80 píxeles.
Guardar estos valores como propiedades es lo que te permite actualizarlos después. Si no los almacenas, no tienes forma de recordar dónde estaba el personaje en el frame anterior.
Por qué cargar la imagen dentro del constructor
La imagen del personaje se crea una sola vez dentro del constructor de la clase. Asignas this.mapafoto = new Image() y defines su source con la foto de Capipepo. Así evitas estar creando una nueva instancia de imagen cada vez que pintas, lo que sería costoso en rendimiento.
Cómo creo la función pintarPersonaje
La lógica de dibujo se separa en su propia función para mantener el código limpio y reutilizable. La función pintarPersonaje toma el código que antes dibujaba la imagen y lo encapsula, usando los atributos de la clase en lugar de valores fijos [1:50].
javascript
function pintarPersonaje() {
lienzo.drawImage(
capipepo.mapafoto,
capipepo.x,
capipepo.y,
capipepo.ancho,
capipepo.alto
);
}
Referenciar capipepo.x, capipepo.y, capipepo.ancho y capipepo.alto hace que el dibujo siempre refleje el estado actual del objeto. Si la posición cambia, el siguiente pintado lo muestra automáticamente en el lugar nuevo.
Cómo funciona la función moverCapipepo
Aquí viene la parte interesante: el movimiento real. La función moverCapipepo actualiza la propiedad x sumándole cinco píxeles a su valor actual y luego llama a pintar el personaje [2:30].
javascript
function moverCapipepo() {
capipepo.x = capipepo.x + 5;
pintarPersonaje();
}
Cada clic mueve al personaje cinco píxeles a la derecha. Pero si solo haces eso, vas a notar un problema: el personaje deja un rastro porque el dibujo anterior sigue ahí.
¿Por qué un personaje deja rastro al moverse en canvas? Porque el canvas no borra automáticamente lo que ya pintaste. Cada nuevo dibujo se superpone al anterior, así que necesitas limpiar el lienzo antes de pintar la nueva posición.
Cómo limpiar el canvas con clearRect
La solución es clearRect, un método del canvas que borra un área rectangular. Antes de pintar al personaje en su nueva posición, limpias todo el lienzo desde la coordenada (0,0) hasta el ancho y alto del mapa [3:10].
javascript
lienzo.clearRect(0, 0, mapa.ancho, mapa.alto);
pintarPersonaje();
Este patrón, limpiar y volver a pintar, es la base de cualquier animación en canvas. Sin el clearRect, verías una estela; con él, el movimiento se ve nítido y único en cada frame.
¿Qué hace clearRect en JavaScript? Borra un rectángulo del canvas dejándolo transparente. Recibe cuatro parámetros: x, y, ancho y alto del área a limpiar.
Reto: mover al personaje verticalmente
Ya controlas el eje horizontal sumando a capipepo.x. El siguiente paso es replicar la lógica para el eje vertical modificando capipepo.y. Piensa en cómo agregarías un segundo botón y una función paralela para lograrlo.
En la próxima clase verás la solución y también cómo lograr que el movimiento sea continuo, sin necesidad de hacer clic en cada paso. ¿Cómo resolverías tú el movimiento vertical? Cuéntame en los comentarios.
