# Prueba el área de impacto, no solo el diseño del botón

> 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.

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

Un control puede parecer grande, mientras que su región de impacto real es una pequeña parte de la obra de arte. En un juego de navegador, defina deliberadamente los límites interactivos y pruébelos con un dedo, no sólo con el puntero preciso del mouse. El objetivo correcto depende de su función, el espaciado y el movimiento circundante, pero las regiones de impacto claras reducen los errores accidentales y hacen que sea más fácil razonar sobre las entradas.

## Separa la forma visible de la zona interactiva

Para un icono pequeño, como el botón de pausa, haz que el contenedor interactivo se extienda más allá del símbolo dibujado. Separa lo suficiente las acciones vecinas para que un dedo no active ambas por accidente. En un juego con canvas, dibuja el objeto y calcula su zona interactiva a partir de los mismos datos de diseño; duplicar coordenadas en distintos fragmentos de código puede hacer que dejen de coincidir.

El criterio de conformidad 2.5.8 de WCAG 2.2 establece un mínimo de 24 × 24 píxeles CSS, con excepciones definidas, como las de espaciado y controles equivalentes. Trátalo como un requisito de accesibilidad, no como un límite de diseño: un objetivo móvil o una acción principal puede necesitar más espacio. No dependas solo del color o de un borde sutil para indicar dónde se detecta el toque.

## Comprueba las zonas interactivas en tamaños reales de pantalla

Prueba los toques cerca de cada borde y esquina, entre controles contiguos y mientras cambia la escala de la superficie de juego. Comprueba que el control visible, la zona interactiva del DOM y las coordenadas del mundo del juego correspondan a la misma acción. Para objetos pequeños en movimiento, puedes ampliar la zona de impacto más allá del dibujo, manteniendo una separación significativa respecto a los peligros.

Prueba con el tacto distintos tamaños de ventana gráfica. Un ratón puede apuntar a lugares a los que un dedo no llega con precisión. Convierte las posiciones del puntero al sistema de coordenadas de la superficie y vuelve a comprobarlas tras cambiar el tamaño. La explicación del W3C describe el criterio y sus excepciones.

## Preguntas

**¿Debe medir cada objetivo del juego al menos 24 píxeles?** El criterio 2.5.8 de WCAG 2.2 exige para las entradas con puntero un objetivo de al menos 24 × 24 píxeles CSS, con excepciones. Evalúa el criterio y usa zonas de interacción más grandes cuando lo requiera el contexto del juego.

**¿Puede la zona interactiva ser más grande que el dibujo?** Sí. Ampliar el área interactiva alrededor de un icono pequeño puede facilitar su activación, siempre que los controles cercanos sigan teniendo resultados claros y previsibles.

## Sigue tu curiosidad

- [Diseña controles táctiles para juegos web](https://oneshotgems.ai/es/topics/touch-controls-for-web-games): 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.
- [Crea diseños adaptables para juegos de navegador](https://oneshotgems.ai/es/topics/responsive-game-layouts): Adapte una superficie de juego a su contenedor sin vincular el estado de la simulación a las dimensiones de la pantalla y pruebe el diseño en ventanas gráficas cambiantes.
- [Diseñar un juego móvil para jugar con un solo pulgar](https://oneshotgems.ai/es/topics/one-thumb-mobile-game-design): Reduzca el juego con un pulgar a un conjunto de acciones viables, tenga en cuenta la posición de la mano y la oclusión de la pantalla, luego pruebe la mecánica en agarres realistas.

## Más información

- [W3C: Tamaño objetivo (mínimo)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- [MDN: eventos de puntero](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)

---
Página canónica: https://oneshotgems.ai/es/topics/game-touch-targets