react framework app javascript android ios touch mobile-website

javascript - framework - Detectar si el navegador tiene teclas de teclado/flecha en la página web



phonegap (8)

Tengo un juego de pantalla completa en HTML + JavaScript, que utiliza las teclas de flecha como controles principales. Esto no se puede usar en dispositivos Android sin teclado (no he probado en iOS), e incluso si el teclado suave tuviera teclas de flecha, ocuparía espacio innecesario. Por lo tanto, he añadido botones de control en pantalla. Sin embargo, los botones son innecesarios (y absurdamente grandes) en los navegadores de escritorio, así que me gustaría que no se abrieran a menos que fueran necesarios.

¿Qué heurística puedo usar para decidir si son necesarios, es decir, si es imposible o incómodo para el usuario ingresar eventos de teclas de flecha, aparte de reconocer Agentes de Usuario específicos (que son directos, pero no a prueba de futuro)?

Por supuesto, permitiré al usuario ocultar / mostrar los botones; Estoy buscando heurísticas útiles para elegir la configuración predeterminada.


En lugar de tratar de adivinar, conviértalo en una opción de configuración para que el usuario elija.


No hay necesidad de ningún sniffing de agente de usuario, opciones de configuración o cualquier tipo de adivinación. Solo haz esto:

  1. Tiene una pantalla de título que dice "presione para continuar".
  2. Al hacer clic o presionar una tecla, se ocultan los controles táctiles y se inicia el juego.
  3. Al tocar, muestra los controles táctiles y comienza el juego.

Ni siquiera necesitó mencionar la opción al usuario y auto-detectó perfectamente su control preferido.


Podría usar javascript para averiguar la altura del puerto de vista de Windows y luego usar una declaración if que diga:

if ($(window).height() <= "960")) { //Your code to display keyboard controls //P.S. 960 is height of iPhone 4+ screen }

Edit: Left out) al final de $(window).height() <= "960"


Si solo tiene flechas (izquierda / derecha / arriba / abajo), ¿podría considerar agregar eventos táctiles dentro del campo de juego? Obviamente, esto no ocuparía espacio, ya que se coloca encima del juego, por lo que podría estar "siempre encendido".

  • Un usuario de computadora ni siquiera sabría que está ahí, aunque podría usarlos para jugar tu juego con un mouse, supongo.

  • El usuario del dispositivo táctil, por otro lado, puede usar las "áreas" (media superior, media izquierda, media inferior y derecha derecha, por ejemplo) mucho más fácilmente debido a ... bueno ... tocar en lugar de usar un mouse.

Esto podría necesitar una explicación, ya que probablemente no querrá que los puntos sean visibles para el usuario, pero se siente como una opción válida.

Incluso si tiene 4 botones y un ''disparo'', puede hacer esto, por ejemplo, agregando una sección ''intermedia''.


Una forma alternativa sería vincular los eventos de barrido y los códigos de teclas a las mismas funciones, de modo que ambas funcionen al mismo tiempo (seguro que eso depende de si el juego aceptará pases) o si tiene algunos controles de joypad en la pantalla.

Esto incluso cubre el avance anticipado mencionado en los comentarios de la respuesta, que acabo de notar.

En la mayoría de los casos, los controles de tap en pantalla son demasiado difíciles de usar (S-NES Emu).

Los mejores que he usado hasta ahora fueron los de Bard''s Tale for Droid.

Consejo: lo mejor para controlar el movimiento direccional en un juego sería el evento tap-hold. Así que uno puede mantener presionado ... necesita una línea de construcción invisible entre el cursor y el centro de la pantalla, para medir los grados del vector de movimiento.

Probablemente, incluso se podría controlar la velocidad por el valor de la presión, simplemente no está seguro si se puede acceder a la propiedad desde JavaScript, ¿o si esto solo está disponible en Android SDK?

En Parallel Kingdom, uno se mueve con un solo toque (pero el personaje no siempre está en el centro de la pantalla, como sucedería con el método del tap-hold mencionado anteriormente).


Utilice la detección de características con Modernizr: http://www.modernizr.com/docs/#touch

Si bien esta no es una forma confiable de verificar si el usuario tiene un teclado, definitivamente es confiable para ver si el navegador es capaz de tocar.



en lugar de mostrar el teclado en pantalla de manera predeterminada, agregue un botón para alternar la visualización del teclado en pantalla.

También podría ser prudente darle al teclado en pantalla la posibilidad de cambiar el tamaño.

Editar para responder a la pregunta:

El teclado debería estar oculto por defecto si la mayoría de sus usuarios van a estar en una computadora,

Visible de forma predeterminada si la mayoría de sus usuarios van a estar en un dispositivo móvil.