Détecter si le navigateur a les touches clavier / flèche dans la page Web

J'ai un jeu plein écran en HTML + JavaScript, qui utilise les touches fléchées comme principal contrôle. Cela ne peut pas être utilisé sur des appareils Android sans clavier (je n'ai pas testé sur iOS), et même si le clavier doux disposait de touches fléchées, cela nécessiterait un espace inutile. Par conséquent, j'ai ajouté des boutons de contrôle à l'écran. Cependant, les boutons sont inutiles (et absurdement grands) sur les navigateurs de bureau, donc j'aimerais qu'ils ne s'affichent pas à moins qu'ils ne soient nécessaires.

Quelles heuristiques puis-je utiliser pour décider si elles sont nécessaires – c'est-à-dire qu'il soit impossible ou gênant pour l'utilisateur d'entrer des événements clés en flèche – autrement que de reconnaître des agents utilisateurs spécifiques (ce qui est simple, mais pas à l'épreuve du futur)?

Je vais bien sûr permettre à l'utilisateur de cacher / afficher les boutons; Je recherche des heuristiques utiles pour choisir le réglage par défaut.

    Il n'est pas nécessaire d'utiliser un sniffing d'utilisateur-agent, des options de configuration ou tout autre type de conjecture. Faites simplement ceci:

    1. Avoir un écran de titre qui indique "appuyez sur pour continuer".
    2. Sur le clic ou la touche, appuyez sur, masquez les contrôles tactiles et démarrez le jeu.
    3. Sur le contact, afficher les contrôles tactiles et démarrer le jeu.

    Vous n'avez jamais eu besoin de mentionner l'option de l'utilisateur et vous avez détecté automatiquement leur contrôle préféré.

    Utilisez la fonction de détection avec Modernizr: http://www.modernizr.com/docs/#touch

    Bien que ce ne soit pas un moyen fiable de vérifier si l'utilisateur a un clavier, il est certainement fiable de voir si le navigateur est capable de toucher.

    Si vous avez seulement des flèches (gauche / droite / haut / bas), vous pourriez envisager d'ajouter des événements tactiles dans le champ de jeu? Cela ne prendrait pas l'espace évidemment car il est superposé au jeu, de sorte qu'il pourrait être «toujours sur».

    • Un utilisateur d'ordinateur ne savait même pas qu'il est là, bien qu'il puisse les utiliser pour jouer votre jeu avec une souris, je suppose.

    • L'utilisateur de l'appareil tactile, d'autre part, peut utiliser beaucoup plus facilement les «zones» (milieu supérieur, milieu gauche, milieu fond et milieu droit par exemple) en raison de … bien .. touchant au lieu d'utiliser une souris.

    Cela pourrait nécessiter des explications, car vous ne voudrez probablement pas que les points soient visibles pour l'utilisateur, mais il se sent comme une option valide.

    Même si vous avez 4 boutons et un «feu», vous pouvez le faire, par exemple en ajoutant une section «intermédiaire».

    Recherchez des événements spécifiques au toucher tels que touchstart ou gesturestart et affichez les contrôles à l'écran si détectés.

    http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

    Je ne sais pas si l'information système-api a été implémentée par les navigateurs: http://www.w3.org/TR/system-info-api/

    Plutôt que d'afficher le clavier à l'écran par défaut, ajouter un bouton pour basculer l'affichage du clavier à l'écran.

    Il pourrait également être prudent de donner au clavier à l'écran la possibilité de redimensionner.

    Modifier pour répondre à la question:

    Le clavier doit être caché par défaut si la plupart de vos utilisateurs vont être sur un ordinateur,

    Visible par défaut si la plupart de vos utilisateurs se trouvent sur un appareil mobile.

    Au lieu d'essayer de deviner, faites-en une option de configuration pour l'utilisateur à choisir.

    Un autre moyen serait de lier les événements de glissement et les codes de clé aux mêmes fonctions – de sorte que les deux fonctionneraient en même temps (sûr que cela dépend si le jeu accepte les swipes – ou a des contrôles joypad à l'écran).

    Cela couvre même la défaillance mentionnée dans les commentaires de la réponse, je viens de remarquer.

    Dans la plupart des cas, les contrôles de prise à l'écran sont trop difficiles à utiliser (S-NES Emu).

    Les meilleurs que j'ai utilisés jusqu'à présent étaient ceux de Bard's Tale for Droid.

    Astuce: le meilleur pour contrôler le mouvement directionnel dans un jeu serait l'événement de prise de courant. Ainsi, on peut retenir … besoin d'une ligne de construction invisible entre le curseur et le centre de l'écran – afin de mesurer les degrés du vecteur de mouvement.

    On pourrait probablement même contrôler la vitesse par la valeur de la pression – tout simplement pas sûr si la propriété peut être consultée à partir de JavaScript – ou si cela n'est disponible que dans le SDK d'Android?

    Dans Parallel Kingdom on se déplace par simple-tap (mais le personnage n'est pas toujours au milieu de l'écran, comme ce serait avec la méthode de prise de courant mentionnée ci-dessus).

    Vous pouvez utiliser javascript pour connaître la hauteur du port de la vue Windows et ensuite nous une déclaration if indiquant:

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

    Edit: Left out) à la fin de $(window).height() <= "960"