CursosEmpresasBlogLiveConfPrecios

Movimiento Continuo de Personajes en Canvas con JavaScript

Clase 63 de 84 • Curso Gratis de Programación Básica

Clase anteriorSiguiente clase
Resumen

¿Cómo mover un personaje en todas direcciones sobre un Canvas?

Para dominar la gestión de un personaje en un canvas, es crucial entender cómo moverlo en diferentes direcciones. En este caso, trabajaremos con botones direccionales y funcionalidad continua para asegurar que el personaje, Capipepo, se desplazará suavemente en nuestro juego.

¿Qué pasos iniciales seguir para crear los botones?

Para empezar, es necesario generar los botones que permitirán mover a Capipepo. Los siguientes pasos resumen cómo configurar esto en HTML:

  1. Duplicar la línea del botón existente: Se necesitan cuatro botones en total para cada dirección: arriba, abajo, izquierda y derecha.
  2. Nombrar las funciones de movimiento: Estas funciones se llamarán moverArriba, moverAbajo, moverIzquierda y moverDerecha.

¿Cómo implementar las funciones de movimiento?

Cada una de las funciones determinará la dirección en la que se mueve Capipepo en el canvas, utilizando coordenadas x e y. A continuación, se presentan los detalles de cada función:

<!-- Botones de movimiento: -->
<button onclick="moverArriba()">Arriba</button>
<button onclick="moverIzquierda()">Izquierda</button>
<button onclick="moverAbajo()">Abajo</button>
<button onclick="moverDerecha()">Derecha</button>

function moverDerecha() {
    capipepo.velocidadX = 5; // Se mueve a la derecha
}

function moverIzquierda() {
    capipepo.velocidadX = -5; // Se mueve a la izquierda
}

function moverAbajo() {
    capipepo.velocidadY = 5; // Se mueve hacia abajo
}

function moverArriba() {
    capipepo.velocidadY = -5; // Se mueve hacia arriba
}

¿Cómo garantizar el movimiento continuo?

Los movimientos deben continuar mientras el botón está presionado. Para esto, cambiamos el evento onclick del botón por dos eventos diferentes: onmousedown y onmouseup.

  1. Evento onmousedown: Asigna velocidad al personaje.
  2. Evento onmouseup: Detiene el movimiento del personaje.
<button onmousedown="moverArriba()" onmouseup="detenerMovimiento()">Arriba</button>
<button onmousedown="moverIzquierda()" onmouseup="detenerMovimiento()">Izquierda</button>
<button onmousedown="moverAbajo()" onmouseup="detenerMovimiento()">Abajo</button>
<button onmousedown="moverDerecha()" onmouseup="detenerMovimiento()">Derecha</button>

¿Cómo actualizar la posición del personaje?

Para actualizar constantemente la posición del personaje en el canvas, se utiliza la función de setInterval. Esta función se encargará de pintar al personaje en su nueva posición de acuerdo a su velocidad cada cierto tiempo en milisegundos.

function pintarPersonaje() {
    capipepo.x += capipepo.velocidadX;
    capipepo.y += capipepo.velocidadY;
    // Código para pintar a Capipepo en su nueva posición
}

let intervalo = setInterval(pintarPersonaje, 50);

¿Qué hacer para detener el movimiento?

Cada vez que se suelta el botón del mouse, la velocidad asignada al personaje debe volver a cero, deteniendo así el movimiento.

function detenerMovimiento() {
    capipepo.velocidadX = 0;
    capipepo.velocidadY = 0;
}

Con estos pasos, puedes implementar un sistema básico para controlar el movimiento de un personaje sobre un canvas utilizando botones y asegurar que el personaje mantenga un movimiento fluido mientras se mantiene una tecla o botón presionado. ¡Sigue aprendiendo para mejorar tus habilidades y crear experiencias interactivas asombrosas!