# Diseña la entrada táctil con una intención clara

> Planifica la interacción táctil teniendo en cuenta los gestos del navegador, las señales visuales y el estado del puntero, para que el juego responda de forma predecible en teléfonos.

- URL: https://oneshotgems.ai/es/topics/touch-controls-for-web-games
- Categoría: Para desarrolladores de juegos
- Tipo: Guía
- Actualizado: 5 de octubre de 2026

La entrada táctil comparte la pantalla con los gestos de desplazamiento y zoom del navegador. Define qué zonas aceptan acciones del juego, qué inicia una pulsación y cómo puede el jugador terminarla o cancelarla. Empieza describiendo el gesto desde el punto de vista del jugador y decide después qué señal visible confirma que el juego lo ha reconocido.

## Define el gesto y el límite del navegador

Usa Pointer Events cuando una sola vía de entrada para ratón, lápiz y pantalla táctil encaje con la mecánica. Sigue el puntero activo desde pointerdown, durante el movimiento y hasta que se suelte; ignora los demás punteros salvo que el multitoque forme parte del diseño. Configura touch-action en la superficie de juego para conservar el desplazamiento o el gesto de pellizcar y ampliar del navegador cuando los jugadores los necesiten. Aplicar touch-action: none a toda la superficie puede impedir el zoom del navegador.

En una mecánica de arrastre, muestra de inmediato que el objeto está agarrado y actualízalo según la posición del puntero. En una mecánica de toque, decide si un pequeño movimiento cancela la activación y prueba ese umbral en dispositivos táctiles reales. Limita la política de gestos a la superficie de juego en vez de aplicarla a toda la página.

## Trata la cancelación como un resultado normal

El navegador puede cancelar un puntero si toma el control de un gesto, si cambia el estado del dispositivo o si la interacción se interrumpe por otro motivo. Al recibir pointercancel, borra el estado de pulsación igual que después de soltar normalmente; de lo contrario, un personaje podría seguir moviéndose o un botón parecería quedarse pulsado. Si el juego captura un puntero, libera esa captura durante la limpieza.

Prueba un toque, un arrastre lento, un gesto que empieza en el borde y un intento de desplazamiento del navegador. Comprueba que cada acción tenga una señal clara y que al salir de la superficie ningún control quede atascado. La guía de Pointer Events de MDN explica el modelo compartido de punteros y el comportamiento de touch-action.

## Preguntas

**¿Debería un juego desactivar todos los gestos táctiles del navegador?** Solo si la superficie de juego necesita controlar esos gestos. Siempre que sea posible, conserva el desplazamiento o el zoom del navegador y limita las reglas de touch-action a la zona que las necesita.

**¿Qué debería ocurrir después de pointercancel?** Finaliza la acción del juego en curso y borra el estado de pulsación o de arrastre. La cancelación es un resultado esperado de la entrada, así que la limpieza debe ser tan deliberada como la gestión de pointerup.

## Sigue tu curiosidad

- [Utilice eventos de puntero para la entrada de juegos del navegador](https://oneshotgems.ai/es/topics/pointer-events-for-games): Modele el mouse, el lápiz y el tacto a través de eventos de puntero, preservando al mismo tiempo la captura, la identidad del dispositivo y el comportamiento de compatibilidad en un bucle de juego.
- [Objetivos táctiles de tamaño para juegos de navegador](https://oneshotgems.ai/es/topics/game-touch-targets): Haga que los controles del juego sean más fáciles de utilizar separando las ilustraciones visuales de los límites interactivos y verificando el tamaño, el espaciado y la superposición en los dispositivos táctiles.

## Más información

- [MDN: eventos de puntero](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
- [MDN: touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action)

---
Página canónica: https://oneshotgems.ai/es/topics/touch-controls-for-web-games