1-Teclas

En este codigo implementamos tres funciones para capturar los eventos del teclado.




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Keypress.js</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/keypress.js@2.1.5/keypress.js"></script>
    <script>
        // Configuración del teclado
        var configTeclado = { prevent_repeat: true };
        var eventoTeclado = new window.keypress.Listener(this, configTeclado);

        // Funciones asociadas a las combinaciones
        function pulsaA() {
            console.log('has pulsado a');
        }

        function pulsaAB() {
            console.log('has pulsado a y b a la vez');
        }

        function ataqueEspecial() {
            console.log("¡Has desbloqueado el ataque especial!");
        }

        // Asignar combinaciones de teclas
        eventoTeclado.simple_combo('a', pulsaA);
        eventoTeclado.simple_combo('a b', pulsaAB);
        eventoTeclado.sequence_combo('up down a b', ataqueEspecial);
    </script>
</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

2-canvas

Imagen
Este código crea un lienzo en la página web y permite interactuar con él utilizando el ratón. Cuando cargas la página, la función inicializar()se ejecuta automáticamente gracias al atributo onloaden el cuerpo del HTML. Esta función configura el lienzo ( canvas) para escuchar eventos del ratón. Eventos que detectan: mousedown: Se dispara cuando haces clic sobre el lienzo. Al suceder, se ejecuta la función clickRaton()que muestra en la consola el mensaje "pulsando ratón". mouseup: Se activa cuando sueltas el botón del ratón. Llama a la función sueltaRaton(), que imprime "soltado ratón" en la consola. mousemove: Este evento detecta el movimiento del ratón mientras está sobre el lienzo. La función posicionRaton()obtiene la posición actual del ratón (coordenadas xe y) y las muestra en la consola. En resumen, este código registra interacciones básicas del ratón sobre un lienzo para capturar clics, movimientos y la acción de soltar el botón, mostrando los resultados en la ...
Leer más

3-1-Personajes

Imagen
 El código está diseñado para dibujar personajes en un lienzo ( canvas ), pero actualmente no tienen movimiento porque no se está actualizando la posición de los personajes en cada frame. Solución: Hacer que los personajes se muevan Para que los personajes se muevan, debes modificar sus coordenadas ( x o y ) dentro de la función principal() en cada iteración del bucle que setInterval ejecuta. Esto se logra simplemente alterando las propiedades this.x o this.y de los objetos creados con la función personaje . <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>             </head> <body onload = " inicializa ()" >     <canvas id = "canvas...
Leer más