Movimiento de Capipepo en Canvas con HTML y JavaScript

¿Cómo mover a Capipepo en tu aplicación?

Mover elementos gráficos en un lienzo o "Canvas" es una habilidad esencial en el desarrollo de videojuegos y aplicaciones gráficas. Hoy, exploraremos cómo aplicar movimiento a Capipepo, un personaje dentro de tu Canvas. Te guiaré paso a paso a través de este emocionante proceso, ¡así que prepárate para darle vida a Capipepo en tu código!

¿Cómo agregamos un botón de movimiento en HTML?

Para empezar, vamos a añadir interactividad a nuestro HTML. Necesitamos crear un botón que, al ser clicado, llame a la función moverCapipepo. Simplemente agrega una etiqueta de botón de la siguiente manera:

<button onclick="moverCapipepo()">Mover</button>

Este botón será el encargado de iniciar el movimiento de nuestro personaje.

¿Cuál es la configuración inicial de los atributos en JavaScript?

Ahora que tenemos el HTML preparado, pasamos al JavaScript, donde configuraremos los atributos de posición y dimensiones para Capipepo. Estos valores son cruciales para mantener un seguimiento de su ubicación en el Canvas.

class Mokepon {
  constructor() {
    this.x = 20; // posición inicial en X
    this.y = 30; // posición inicial en Y
    this.ancho = 80; // ancho del personaje
    this.alto = 80; // alto del personaje
  }
}

Estos valores iniciales asegurarán que Capipepo se muestre adecuadamente en la pantalla.

¿Cómo pintamos a Capipepo en el Canvas?

Con los atributos establecidos, el siguiente paso es pintar a Capipepo usando la función pintarPersonaje. Vamos a implementar el método que nos permita dibujar a nuestro personaje en su posición actual.

pintarPersonaje() {
  const canvas = document.getElementById('miCanvas');
  const contexto = canvas.getContext('2d');
  
  const capipepoImagen = new Image();
  capipepoImagen.src = this.mapaFoto;
  
  capipepoImagen.onload = () => {
    contexto.drawImage(
      capipepoImagen, 
      this.x, this.y, 
      this.ancho, this.alto
    );
  };
}

Al usar drawImage, nos aseguramos de que se dibuje la imagen en el punto (x, y) con las dimensiones definidas.

¿Cómo logramos que Capipepo se mueva?

La clave del movimiento está en actualizar las coordenadas de Capipepo y repintarlo. Para moverlo, implementaremos la función moverCapipepo.

function moverCapipepo() {
  capipepo.x += 5; // Se mueve 5 píxeles en horizontal

  // Antes de repintar el personaje, limpiamos el área
  contexto.clearRect(0, 0, canvas.width, canvas.height);
  
  // Procedemos a pintar nuevamente
  capipepo.pintarPersonaje();
}

Este simple incremento en la posición x permite ver el desplazamiento en el canvas. Cada vez que hacemos clic en el botón, Capipepo se moverá hacia la derecha.

¿Qué sigue en el desarrollo?

Ahora que hemos logrado mover a Capipepo horizontalmente, te propongo un desafío: intenta que se mueva verticalmente modificando el valor de y. En la próxima clase, exploraremos cómo hacer que el movimiento sea continuo, permitiéndote crear animaciones más fluidas en tu aplicación.

Recuerda que el aprendizaje viene de la práctica, ¡así que anímate a experimentar y a hacer que tu código cobre vida!