Mecanismos de control en juegos JavaScript

7 octubre, 2017 4:06 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Las laptops, computadoras, smartphones, tablets, televisores, e incluso refrigeradores tienen una cosa en común — probablemente corren un navegador, así que probablemente puedas jugar un juego HTML5 en ellos. Renderizar el juego en pantalla es una cosa, pero también tienes que controlarlo de algun modo, y hay un montón de opciones diferentes adecuadas para varias plataformas. Desde táctiles, pasando por el ratón y el teclado, al gamepad, incluso un control remote de televisor o … plátanos — estas interfaces están cubiertas en una serie de nuevos artículos sobre mecanismos de control, ahora disponibles en la MDN.

Para mostrar su uso en la vida real en un proyecto, estos mecanismos de control están implementados en el juego de demostración de Captain Rogers: Battle at Andromeda desarrollado con Phaser, para que puedas ver cómo el juego se ve afectado por la plataforma. También puedes ver que no necesitas desarrollos separados para diferentes plataformas — la naturaleza multiplataforma de la Web puede ayudarte a ajustar los controles al dispositivo en el que se juega sin mucho esfuerzo de codificación.

Hay una pequeña demostración de controles en JavaScript puro de código abierto en GitHub, así que puedes ver exactamente cómo están implementados estos mecanismos, y pruébalos por ti mismo en tus propio entorno de desarrollo. Sumérgete en el código, o revisa lo más destacado de las partes clave a continuación.

Tacto en móviles

Vamos a empezar con el soporte de tacto en móviles debido al enfoque de móvil primero en los juegos HTML5:

document.addEventListener("touchstart", touchHandler);
document.addEventListener("touchmove", touchHandler);
function touchHandler(e) {
    if(e.touches) {
        playerX = e.touches[0].pageX - canvas.offsetLeft - playerWidth / 2;
        playerY = e.touches[0].pageY - canvas.offsetTop - playerHeight / 2;
    }
}

Estas pocas líneas de código JavaScript son todo lo que necesitas para unos controles muy básicos en tu juego, para que puedas jugarlo en dispositivos móviles. Las primeras dos líneas inicializan los monitores de evento para los eventos táctiles en los que estamos interesados cuando tocas la pantalla, y cuando deslizas tus dedos a través de ella. La función verifica si algunos toques son realizados, y luego establece las coordenadas del jugador para que la nave se pueda renderizar en el lugar correcto del lienzo del juego.

Esto sólo es lo básico, y tú puedes (y deberías) expandir las posibilidades, por ejemplo implementar multitoques o gestos. Todo depende de qué tipo de juego tienes, y qué debe ser controlado (y cómo). También puedes ofrecer botones en pantalla para realizar acciones, por ejemplo flechas de movimiento y un botón de disparo. Mira el artículo de controles táctiles para móvil para más detalles.

Mouse y teclado de escritorio

Ya que estamos hablando de “flechas de movimiento”, puedes imprimirlas en pantalla para dispositivos móviles, pero puedes implementarlas en escritorio también. Las teclas de cursor o teclas WASD son formas populares de mover un personaje en el juego. Por ejemplo, el siguiente caso maneja las techas de cursor:

document.addEventListener("keydown", keyDownHandler);
function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
    if(e.keyCode == 40) {
        downPressed = true;
    }
    else if(e.keyCode == 38) {
        upPressed = true;
    }
}

Todo se trata de detectar constántemente y luego guardar la información sobre qué tecla fue presionada, para que pueda ser procesada en el bucle de dibujo:

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if(rightPressed) {
        playerX += 5;
    }
    else if(leftPressed) {
        playerX -= 5;
    }
    if(downPressed) {
        playerY += 5;
    }
    else if(upPressed) {
        playerY -= 5;
    }
    ctx.drawImage(img, playerX, playerY);
    requestAnimationFrame(draw);
}

Las variables de las posiciones x y y del jugador son ajustadas y luego la imagen de una nave es movida al nuevo punto.

El mouse de escritorio y los toques móviles son muy similares desde el punto de vista de codificación: todo lo que necesitas haces es darle la información de en donde ocurre el click o el toque y actualizar la posición del juegador:

document.addEventListener("mousemove", mouseMoveHandler);
function mouseMoveHandler(e) {
    playerX = e.pageX - canvas.offsetLeft - playerWidth / 2;
    playerY = e.pageY - canvas.offsetTop - playerHeight / 2;
}

El evento mousemove es detectado, y la posición del jugador es ajustada para colocar la nave en el centro del puntero del mouse siempre que cambie. Eso es todo lo que necesitas para hacer tu juego jugable en escritorio usando tanto teclado y mouse — para más detalle, revisa el artículo controles de teclado y mouse en el escritorio.

Gamepad

Mi control favorito — uso la API Gamepad para controlar todas mis diapositivas basadas en HTML durante mis presentaciones. He hablado sobre esta API algunas veces, escrito un par de artículos, implementado algunos juegos, e incluido toda la información relevante en el Kit de Contenido del API Gamepad. Es realmente asombroso de seamos capaces de sentir la experiencia de una consola en una computadora. ¡Y funciona gracias a las tecnologías Web! Jugar Captain Rogers con un gamepad enriquese la experiencia y se siente mucho mejor.

Cubrir el soporte del API Gamepad es un poco más complejo que eventos de tacto y telcado, pero sigue siendo bastante sencillo:

window.addEventListener("gamepadconnected", gamepadHandler);
function gamepadHandler(e) {
    controller = e.gamepad;
}
function gamepadUpdateHandler() {
    buttonsPressed = [];
    if(controller.buttons) {
        for(var b=0; b

Cuando el gamepad se conecta, se lanza un evento así que podemos obtener la referencia a sus datos en una variable que podemos usar después. En cada actualización, un nuevo arreglo de botones presionados es creado, así que el estado actual siempre será el útlimo. También hay una función que recorrerá el arreglo para ver si un botón específico que nos interesa se presiona. Esta información puede, entonces, ser usada en el bucle de dibujo, en una manera similar a la comprobación del teclado:

function draw() {
    // ...
    gamepadUpdateHandler();
    if(gamepadButtonPressedHandler(0)) {
        playerY -= 5;
    }
    else if(gamepadButtonPressedHandler(1)) {
        playerY += 5;
    }
    if(gamepadButtonPressedHandler(2)) {
        playerX -= 5;
    }
    else if(gamepadButtonPressedHandler(3)) {
        playerX += 5;
    }
    if(gamepadButtonPressedHandler(11)) {
        alert('BOOM!');
    }
    // ...
}

Esa es la manera en que controlamos la nave del jugador presionando los botones DPad correspondientes, e incluso lanzar una explosión de bomba con el botón A. También puedes detectar los ejes, o incluso construir tu propia pequeña librería para manejar la entrada desde gamepad — revisa el artículo sobre controles de gamepad en el escritorio para más detalles sobre esto.

Controles no convencionales

Si gustas, puedes ir incluso más lejos y jugar con un control remoto en una gran pantalla de televisor en tu sala, agitando tu mano en frente de una laptop, o presionar alimentos cotidianos conectados con cables a tu PC.

Por ejemplo, el cotrol remoto de los televisores Panasonic es sorprendentemente fácil de implementar, ya que reusa los eventos de teclado, y las fechas direccionales tiene los mismos códigos que las teclas de cursor de teclado — 37, 38, 39 y 40, así que está listo para usar. Si necesitas más botones específicos, aquí tienes una lista completa, junto con información más detallada.

En lugar de presionar los botones en un control remoto, puedes usar la capacidad de dispositivos Leap Motion para detectar la posición de las manos y otros parámetros para tomar control de la nave del navegador sin tocar algún control. En un bule predefinido podemos obtener los detalles de las manos...

Leap.loop({
    hand: function(hand) {
        horizontalDegree = Math.round(hand.roll() * toDegrees);
        verticalDegree = Math.round(hand.pitch() * toDegrees);
        grabStrength = hand.grabStrength;
    }
});

y usarlos para actualizar la posición del jugador:

function draw() {
    // ...
    if(horizontalDegree > degreeThreshold) {
        playerX -= 5;
    }
    else if(horizontalDegree < -degreeThreshold) { playerX += 5; } if(verticalDegree > degreeThreshold) {
        playerY += 5;
    }
    else if(verticalDegree < -degreeThreshold) {
        playerY -= 5;
    }
    if(grabStrength == 1) {
        alert('BOOM!');
    }
    // ...
}

Podrás encontrar la implementación de otros mecanismos de control como el efecto Doppler, la API de Proximidad, o incluso Makey Makey en el artículo de controles no convencionales.

Resumen

Estos días, hay una gran cantidad de dispositivos, grandes y pequeños, en los cuales puedes jugar juegos HTML5. ¿Tu reloj? ¿Un juego web activado por voz? Las posibilidades son infinitas. Y recuerda: cuantos más mecanismos de control pueda soportar tu juego, mejor, ya que podrá ser jugado en un amplio rango de dispositivos, en todas las plataformas posibles. Toma ventaja de las oportunidades habilitadas por el navegador.

The following two tabs change content below.

AngelFQC

Web Developer at BeezNest Latino
Ingeniero de Sistemas y Computación. Desarrollador PHP. Mozilla Peru. Chamilo LMS Developer.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa