Eventos de Teclado para Controlar Personajes en Juegos

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:23

Eventos de Teclado para Controlar Personajes en Juegos

Curso Gratis de Programación Básica 2022

Clase 64 de 84

Clase 64 / 84

Recursos

¿Cómo escuchar eventos de teclado en JavaScript?

En el desarrollo de aplicaciones web interactivas, manejar los eventos de teclado es esencial para enriquecer la experiencia del usuario. ¿Cómo podemos capturar y utilizar estos eventos? Es fundamental entender los "event listeners", herramientas que nos permiten detectar acciones específicas, en este caso, la pulsación o liberación de teclas. Empezaremos añadiendo un "event listener" que escuche el evento "keydown", y llamaremos a una función cada vez que una tecla sea presionada.

document.addEventListener('keydown', sePresionóUnaTecla);
document.addEventListener('keyup', detenerMovimiento);

¿Cómo funciona el objeto event?

Cuando se añade un "event listener", a menudo se retorna un objeto event, que contiene información vital sobre la acción realizada. Este objeto puede decirnos qué tecla fue presionada, cuál fue el valor de un input, entre otras cosas. Aprovechamos esta información para trazar qué tecla se pulsó usando event.key, que devuelve el nombre de la tecla.

function sePresionóUnaTecla(event) {
  console.log(event.key);
}

¿Cómo mover un personaje en el juego usando el teclado?

Una vez que detectamos las teclas, el siguiente paso es implementar la lógica para mover un personaje. Usamos una estructura switch-case para comparar la tecla presionada con las flechas direccionales.

function sePresionóUnaTecla(event) {
  switch (event.key) {
    case "ArrowUp":
      moverArriba();
      break;
    case "ArrowDown":
      moverAbajo();
      break;
    case "ArrowLeft":
      moverIzquierda();
      break;
    case "ArrowRight":
      moverDerecha();
      break;
    default:
      break;
  }
}

"ArrowUp": Llama a la función moverArriba().
"ArrowDown": Llama a la función moverAbajo().
"ArrowLeft": Llama a la función moverIzquierda().
"ArrowRight": Llama a la función moverDerecha().

¿Qué hace cada función de movimiento?

Las funciones como moverArriba(), moverAbajo(), etc., deben estar previamente definidas para manipular las coordenadas del personaje dentro de tu juego, permitiendo así que el personaje se desplace en la dirección correspondiente.

¿Cómo organizar mejor el código?

Para mantener nuestro código limpio y organizado, implementamos la función iniciarMapa. Esta función reunirá todo lo necesario para iniciar el mapa, incluyendo la configuración de "event listeners".

function iniciarMapa() {
  document.addEventListener('keydown', sePresionóUnaTecla);
  document.addEventListener('keyup', detenerMovimiento);
}

Invocamos iniciarMapa() al cargar la aplicación, asegurando que todo esté listo para funcionar correctamente desde el principio. Mantener el código organizado no solo mejora la legibilidad, sino que facilita el mantenimiento a largo plazo.

Con estos fundamentos, has dado un paso significativo hacia la creación de aplicaciones web interactivas. ¡Continúa explorando y mejorando tus habilidades! Remember, practicar es la clave para dominar el arte del desarrollo de software.

Nestor Rios Garcia

Hace 4 años

Botones mokepon en tu celular

Para aquellos que quieren probarlo en sus smartphones y tablets, les presento los siguientes eventos:

touchstart
touchend

Y en vez de llenar nuestras etiquetas <button> con demasiados eventos, podemos incluirlos en la nueva función "iniciarMapa()":

"
function iniciarMapa() {
    const controls = document.querySelectorAll('.boton-controles')
    controls.forEach((control)=>{
        control.addEventListener('mousedown',()=>moverMokepon(control.id))
        control.addEventListener('mouseup',()=>detenerMokepon())
        control.addEventListener('touchstart',()=>moverMokepon(control.id))
        control.addEventListener('touchend',()=>detenerMokepon())
    })
    intervalo = setInterval(pintarPersonaje, 50)
    window.addEventListener("keydown", sePresionoTecla)
    window.addEventListener("keyup", detenerMokepon)
}

NOTA: los id de mis botones tienen el mismo nombre que los event.key, aqui el porque.

function moverMokepon(direccion) {
    switch (direccion) {
        case "ArrowUp":
            pydos.velocidadY = -5;
            break;
        case "ArrowLeft":
            pydos.velocidadX = -5;
            break;
        case "ArrowRight":
            pydos.velocidadX = 5;
            break;
        case "ArrowDown":
            pydos.velocidadY = 5;
            break;
        default:
            break;
    }
}
function detenerMokepon() {
    pydos.velocidadX = 0
    pydos.velocidadY = 0
}
function sePresionoTecla(event) {
    tecla = event.key
    switch (event.key) {
        case "ArrowUp":
            moverMokepon(tecla)
            break;
        case "ArrowLeft":
            moverMokepon(tecla)
            break;
        case "ArrowRight":
            moverMokepon(tecla)
            break;
        case "ArrowDown":
            moverMokepon(tecla)
            break;
        default:
            break;
    }
}

Este aporte me ayudó: santiago-lopera

Isaac Labrador

Hace 4 años

Que bueno se ve mis respetos

Ronald Becerra

Hace 3 años

Yo les dejé los eventos que ya tenían en el HTML para el mouse, y a través de JavaScript hice que los eventos táctiles los replicaran:

function establecerEventosTactilesBotones(){
    // Copiamos los eventos que ya tenían para el teclado
    sectionVerMapa.querySelectorAll("button").forEach((button) => {
        button.addEventListener('touchstart', button.onmousedown, {passive:false});
        button.addEventListener('touchend', button.onmouseup, {passive:false});
    });
}

Comentarios (93)93 comentarios

Xiomara Alejandra Hernández Arzola

Ramses Velazquez

Johan Son

Hace 2 años

Camilo Manrique

Alejandro Castro

Diego Alejandro Moreno Pedroza

Jorge Ezequiel Segundo Anfuso

Jose Carlos Aguirre Romero

Eduardo Peña Ramos

Gerwin Lopez

Rubén Ernesto Aragón Gil

Víctor Salazar

Daniel Zuluaga

Kleyver Valencia Alegria

Alan Chiani

Juan David Rueda Quiroga

Arnaldo Medina

Adriel Gomez

Fernando Yutiz

Juan Carlos Espinoza Flores

Usuario anónimo

User

Juan Castro

Profesor

Alejandro Nieto

Juan José Díaz Montoya

Carlos Rubén Díaz Gutiérrez

Ulqernesh Karvenae

Sergio Valverde

Raul Santos

Fabriccio Sergio Mora Fontalvo

Daviana Bou

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

LUIS MIGUEL MUÑOZ EBRATT

Juan David Rodriguez Zendejas

Nestor Fabian Duarte Acencio

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero