13. Lectura del Teclado

 13: Eventos de Teclado en JavaScript | Curso de Programaci贸n de Juegos

¡Hola devs! 馃憢 En la sesi贸n #13 del Curso de Programaci贸n de Juegos con JavaScript, exploramos c贸mo capturar pulsaciones de teclado en tiempo real para crear interacciones din谩micas en nuestros juegos. ¡No m谩s cuadros de texto! ⌨️馃挩

馃敼 ¿Qu茅 veremos?

  • Capturar teclas pulsadas directamente con document.addEventListener.

  • Identificar c贸digos de teclas (¡el espacio es 32 y las flechas tienen sus propios n煤meros!).

  • Librer铆a keydrown.js para combinar teclas y crear secuencias estilo Street Fighter.

javascript
// Ejemplo b谩sico: Capturar tecla ESPACIO
document.addEventListener("keydown", function(tecla) {
  if (tecla.keyCode === 32) {
    console.log("¡Espacio pulsado!");
  }
});

馃幃 Keydrown.js: Magia avanzada

  1. Configuraci贸n: Evita repeticiones de teclas o permite pulsaciones continuas.

  2. Combos simples:

    javascript
    eventoTeclado.simpleCombo("a", function() {
  console.log("¡Tecla A pulsada!");
});

  3. Combos simult谩neos:

    javascript
    eventoTeclado.simpleCombo("a b", function() {
  console.log("¡A y B juntas!");
});

  4. Combos en secuencia (como Street Fighter):

    javascript
    eventoTeclado.sequenceCombo("up down a b", function() {
  console.log("¡Ataque especial activado! 馃敟");
});

馃搶 Pr贸xima sesi贸n: ¡Eventos de rat贸n para mover personajes y disparar! 馃柋️馃挜

馃敆 Recursos:

¿Te gustar铆a ver un juego usando estas t茅cnicas? ¡D茅jalo en los comentarios! 馃憞

#JavaScript #GameDev #Programaci贸n #AprendeJavaScript

Comentarios

Publicar un comentario

Entradas m谩s populares de este blog

codigo

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Protagonista y Disparos con Barra de Vida </ title > </ head > < body onload = " inicializa()" >     < canvas id = "canvas" width = "500" height = "300" style = " border:2px solid #000" ></ canvas > < script > let canvas, ctx; let FPS = 50 ; let vida = 100 ; // Imagen del protagonista let imgMega = new Image(); imgMega.src = 'img/mega.jpeg' ; // Inicializaci贸n function inicializa() {     canvas = document.getElementById( "canvas" );     ctx = canvas.getContext( "2d" );     setInterval(principal, 1000 / FPS); } // Clase Protagonista class Protagonista {     constructor (x, y) {         this .x = x;       ...
Leer m谩s

5. 04.funciones parte1

  Post: Funciones en JavaScript - Parte 1 https://image.png Duraci贸n:  8:17 / 8:34 Introducci贸n a las funciones en JavaScript Hola, ¿qu茅 tal? Vamos a ver ahora el tema de las funciones en JavaScript, un concepto fundamental para desarrollar nuestros videojuegos. Variables iniciales javascript var vida = 100 ; var ataque = 10 ; var pocion = 20 ; Creando nuestra primera funci贸n La sintaxis b谩sica de una funci贸n comienza con la palabra reservada  function , seguida del nombre de la funci贸n: javascript function muestraVida ( ) { console . log ( vida ) ; } Esta funci贸n tiene la tarea de mostrar nuestra vida actual en la consola. Para llamarla, simplemente usamos su nombre: javascript muestraVida ( ) ; Integrando funciones con HTML Podemos conectar esta funci贸n a un bot贸n en HTML: html < button onClick = " muestraVida ( ) " > Mostrar Vida </ button > Cada vez que hagamos clic en este bot贸n, se ejecutar谩 la funci贸n y veremos nuestro nivel de vida (10...
Leer m谩s