¿Cómo agregar controles táctiles a un juego de navegador pensado solo para teclado?

Pon sobre el juego una capa táctil aparte que le entregue las entradas que ya entiende. Así lo hicimos en KittenGalaxy, y esto es lo que todavía no probamos.

Agrega una capa aparte de controles en pantalla que convierta los toques en las entradas que tu juego ya maneja, y muestra controles distintos en cada pantalla del juego. No tienes que reescribir el juego. Eso fue lo que hicimos para que KittenGalaxy se pudiera jugar en teléfonos, y este artículo repasa las decisiones, incluidas las partes que todavía no pudimos probar.

¿Qué esperaba el juego antes?

KittenGalaxy es un juego de disparos arcade escrito como un solo archivo JavaScript que dibuja en un canvas. Toda su entrada llegaba de tres maneras: pulsaciones de teclas para volar, disparar y moverse por los menús; caracteres escritos para el nombre de un piloto; y clics del mouse para la lista de la tienda y para un teclado numérico dibujado en el canvas en sus desafíos de matemáticas.

En un teléfono eso deja al jugador sin nada que pulsar. No hay teclas, y las teclas numéricas del canvas, dibujadas con 38 unidades de ancho en un campo de 720 unidades, quedan en unos 20 píxeles CSS de ancho en un teléfono de 375 píxeles. Es demasiado pequeño para acertar con seguridad.

¿El toque debe cambiar un estado de entrada compartido o enviar eventos de teclado?

Hay dos diseños habituales.

El estado compartido es el diseño más limpio, y si empiezas un juego hoy, hazlo así. Elegimos los eventos de teclado sintéticos por una razón: KittenGalaxy se desarrolla en otro lugar, y conservamos su archivo byte por byte tal como lo recibimos, para que tomar una versión más nueva nunca signifique rehacer nuestros cambios. Los eventos creados por script sí llegan a los manejadores normales. No disparan las acciones predeterminadas del navegador, y un juego no las necesita.

La capa táctil también necesita saber en qué pantalla está el juego. Para eso, nuestro paso de compilación agrega un pequeño objeto de solo lectura que expone unos pocos valores, como el estado actual y si hay un cohete equipado. Nada en él puede cambiar el juego.

¿Qué controles necesita cada pantalla?

Un único conjunto fijo de botones suele ser el primer intento, y falla en cuanto el juego tiene un menú. Enumera cada pantalla y lo que el jugador debe poder hacer en ella.

Tres detalles importaron más de lo que esperábamos.

Usa un campo de texto real para el texto. Solo un campo con foco hace que el teléfono muestre su teclado. Mantenemos las pulsaciones de ese campo lejos del juego y escribimos el nombre terminado en el juego de una sola vez.

Un dedo no puede pasar por encima sin tocar. Con el mouse, apuntar a una fila de la tienda la selecciona y hacer clic la compra. Un toque hace las dos cosas a la vez, lo que facilita las compras accidentales. La capa convierte el primer toque sobre una fila en una selección y deja pasar el segundo como la compra.

Oculta lo que no corresponde. El botón del cohete aparece cuando hay un cohete equipado y el de la bomba cuando se tiene una bomba. Menos botones significa botones más grandes.

¿Cómo se construye una palanca para el pulgar?

La nave del juego se mueve en ocho direcciones, como con las flechas, así que la palanca solo tiene que decidir qué flechas están pulsadas. La nuestra aparece donde cae el pulgar, ignora el movimiento dentro de una zona muerta de 12 píxeles y considera pulsada una dirección cuando el pulgar está lo bastante lejos sobre ese eje:

const DEAD = 12;
function steer(dx, dy) {
  const far = Math.hypot(dx, dy) > DEAD;
  const want = {
    ArrowLeft:  far && dx < 0 && Math.abs(dx) >= Math.abs(dy) * 0.41,
    ArrowRight: far && dx > 0 && Math.abs(dx) >= Math.abs(dy) * 0.41,
    ArrowUp:    far && dy < 0 && Math.abs(dy) >= Math.abs(dx) * 0.41,
    ArrowDown:  far && dy > 0 && Math.abs(dy) >= Math.abs(dx) * 0.41,
  };
  // press the keys that became true, release the ones that became false
}

El 0.41 es la tangente de 22.5 grados, que divide el círculo en ocho porciones iguales. Cuando el pulgar pasa del borde, el centro de la palanca lo sigue, así que invertir la dirección requiere un movimiento corto en lugar de uno largo.

Usamos eventos de puntero, que cubren toque, lápiz y mouse con un solo conjunto de manejadores, y la captura de puntero, para que la palanca siga recibiendo un pulgar que se desliza fuera de ella. El disparo es automático de forma predeterminada, con un interruptor para quienes prefieren un botón de disparo: mantener un pulgar apretado durante toda una sesión cansa, y un juego de disparos pierde poco por disparar todo el tiempo.

¿Qué impide que el navegador pelee con el juego?

Un navegador trata los toques como desplazamiento, zoom y selección de texto a menos que se le indique otra cosa.

• Define [touch-action: none](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) en el juego y sus controles, para que los arrastres sean tuyos.
• Desactiva la selección de texto y el menú de pulsación larga sobre el juego.
• Suelta todas las teclas mantenidas cuando la ventana pierde el foco. Si no, una nave sigue volando a la izquierda después de que una notificación ocupa la pantalla.
• Inicia el sonido con un toque real. Los navegadores permiten audio solo después de que el jugador interactúa con la página, así que el primer toque también despierta el audio del juego.
• Actualiza los controles con un temporizador, no solo desde el bucle de dibujo, para que los botones correctos estén ahí antes de que se dibuje el primer cuadro.
• Usa las franjas que el juego deja vacías. En vertical, nuestro campo cuadrado queda en el medio, así que los controles van en las franjas negras de arriba y de abajo. En horizontal van en las esquinas y se mantienen tenues.

¿Qué probamos y qué no?

El día del lanzamiento, el 8 de octubre de 2026, revisamos la capa táctil en un navegador de escritorio ajustado al tamaño de un teléfono, en vertical (375 × 812) y horizontal (812 × 375), manejándola con toques programados: crear un piloto mediante el campo de texto, empezar una partida, las ocho direcciones de la palanca, la tienda y responder una pregunta de matemáticas en el teclado numérico.

Todavía no lo jugamos en un teléfono o una tableta reales. La emulación no muestra cómo se siente la palanca bajo un pulgar de verdad, cómo se comporta el teclado de cada teléfono ni cómo responde un dispositivo más lento. La página del juego dice exactamente esto en su opción de navegador móvil, y la actualizaremos cuando se haya probado en dispositivos reales. Si lo juegas en tu teléfono, una reseña que nos diga el dispositivo y lo que pasó es lo más útil que puedes enviar.

Preguntas frecuentes

¿Necesito un motor de juegos para los controles táctiles? No. Los botones son elementos HTML comunes colocados sobre el canvas, y el navegador determina cuál se tocó.

¿Los botones deben dibujarse en el canvas o hacerse en HTML? En HTML, en la mayoría de los casos. Obtienes detección de toques, multitáctil y etiquetas de accesibilidad sin escribirlas, y puedes cambiar el estilo con CSS.

¿Qué tamaño debe tener un botón táctil? Los botones que se pulsan durante el juego miden al menos 46 píxeles CSS por lado en vertical, y los principales son más grandes; unos pocos botones utilitarios en las esquinas son más pequeños a propósito. Las teclas del canvas que reemplazamos medían unos 20.

¿Los jugadores encontrarán un gesto oculto? Supón que no. Cada acción de nuestra capa tiene un botón visible y con etiqueta.

¿Puedo incluir un juego en HeapPlay antes de terminar sus controles móviles? Sí. Cada forma de jugar se indica y se comprueba por separado, así que puedes enviar tu juego con una opción de escritorio ahora y agregar una móvil después. Los desarrolladores verificados pueden luego registrar cada versión por su cuenta; mira qué reciben los desarrolladores.