En los videojuegos, la interacción del jugador es crucial. Capturar la entrada del usuario nos permite mover personajes, activar acciones y controlar la dinámica del juego. En este capítulo, aprenderemos a capturar eventos de teclado y ratón en el canvas, lo que nos permitirá ofrecer control directo sobre los elementos del juego.

Esta imagen muestra como actua tanto el input del teclado como el del ratón

Eventos de Teclado

Podemos capturar los eventos de teclado utilizando los eventos keydown y keyup, que responden cuando el usuario presiona o libera una tecla, respectivamente. Esto es útil para controlar el movimiento de personajes o responder a combinaciones de teclas.

Capturando Eventos de keydown

Para detectar cuando se presiona una tecla, podemos agregar un event listener al objeto window para el evento keydown. A continuación, un ejemplo básico:

javascript

Este código escucha el evento keydown y ejecuta una acción dependiendo de la tecla presionada. Aquí usamos las teclas de flecha, pero podemos capturar cualquier tecla.

Movimiento del Personaje con las Flechas

Podemos expandir este ejemplo para mover un personaje en el canvas. Definimos variables para la posición y ajustamos los valores cuando el usuario presiona una tecla de flecha:

javascript

En este código, cada vez que el usuario presiona una tecla de flecha, la posición del personaje cambia, y se actualiza en el canvas. Esto crea un movimiento fluido de izquierda, derecha, arriba y abajo.

Capturando Eventos de Ratón

Además del teclado, también podemos capturar eventos de ratón, como click, mousedown, mouseup y mousemove. Estos eventos son útiles para detectar clics o movimientos del ratón sobre el canvas.

Detección de Clics

Podemos usar el evento click para detectar cuando el usuario hace clic en una posición específica del canvas:

javascript

Este código calcula la posición (x, y) del clic en el canvas. Usar getBoundingClientRect() nos asegura que la posición sea correcta, incluso si el canvas no está en (0, 0) en la página.

Movimiento de un Personaje Hacia el Clic

Podemos usar la posición del clic para mover un personaje hacia la ubicación del clic. Esto agrega una nueva dimensión de control al juego:

javascript

Este ejemplo permite mover instantáneamente el personaje a la ubicación del clic, creando una experiencia de control directa y sencilla.

Arrastrar y Soltar en el Canvas

El arrastre y soltado es una interacción común que permite a los usuarios mover elementos en el canvas. Podemos lograr esto combinando los eventos mousedown, mousemove, y mouseup:

javascript

Este ejemplo permite que el usuario arrastre el personaje por el canvas al hacer clic y mantener presionado el ratón. Este tipo de control es útil para juegos que requieren manipulación directa de los elementos.

Ejemplo Completo: Movimiento y Control del Personaje

Utilizando lo que hemos aprendido, podemos crear un sistema de control completo que permita mover un personaje con el teclado y el ratón. El siguiente ejemplo combina eventos de teclado y clic para un control versátil:

javascript

En este ejemplo, el personaje puede ser controlado con las teclas de flecha o con el ratón, lo cual mejora la jugabilidad y la interacción en el canvas.

Resumen

En este capítulo, hemos aprendido a capturar eventos de teclado y ratón en el canvas, lo cual nos permite controlar los elementos de nuestro juego. Con estos conceptos, los jugadores pueden interactuar directamente con los personajes y objetos en pantalla, haciendo que el juego sea más dinámico e inmersivo.