11. 2.comandos teclado

 

Comandos de Teclado en JavaScript: Detectando Teclas Pulsadas

¿Alguna vez te has preguntado cómo los videojuegos detectan las teclas que presionas? Hoy exploraremos cómo identificar comandos del teclado usando JavaScript, un paso esencial para crear controles en juegos.

🔍 Detectando Teclas Pulsadas

El código clave que usamos es:

javascript
document.addEventListener('keydown', function(tecla) {
    if (tecla.keyCode == 32) {
        console.log("espacio");
    }
    if (tecla.keyCode == 38) {
        console.log("arriba");
    }
})

📝 Explicación:

  1. Event Listener: Usamos document.addEventListener para "escuchar" cuando se presiona una tecla (keydown).

  2. Key Codes: Cada tecla tiene un código numérico único:

    • 32: Tecla de espacio

    • 38: Flecha arriba

  3. Acciones: Cuando detectamos estas teclas, mostramos un mensaje en consola.

🕹️ Aplicación en Videojuegos

Esta técnica es fundamental para:

  • Mover personajes (con flechas direccionales)

  • Disparar (con barra espaciadora)

  • Realizar acciones especiales (con otras teclas)

💡 Próximos Pasos

Con esta base, podremos:

  1. Mover objetos en pantalla

  2. Controlar personajes de juego

  3. Implementar mecanicas más complejas

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