Rileva se il browser ha tasti tastiera / freccia nella pagina web

Ho un gioco a schermo intero in HTML + JavaScript, che utilizza i tasti freccia come controlli principali. Questo non può essere utilizzato su dispositivi Android senza tastiera (non ho testato su iOS), e anche se la tastiera virtuale avesse i tasti freccia occuperebbe uno spazio inutile. Pertanto, ho aggiunto i pulsanti di controllo su schermo. Tuttavia, i pulsanti non sono necessari (e assurdamente grandi) sui browser desktop, quindi vorrei che non comparissero a meno che non fossero necessari.

Quale euristica è ansible utilizzare per decidere se sono necessari, ovvero se è imansible o difficile per l’utente inserire gli eventi dei tasti freccia, oltre a riconoscere specifici agenti utente (che è semplice, ma non a prova di futuro)?

Ovviamente permetterò all’utente di hide / mostrare i pulsanti; Sto cercando un’euristica utile per scegliere l’impostazione predefinita.

Non è necessario alcuno sniffing user-agent, opzioni di configurazione o qualsiasi tipo di ipotesi. Basta fare questo:

  1. Avere una schermata del titolo che dice “premere per continuare”.
  2. Al clic o alla pressione del tasto, nascondi i comandi touch e avvia il gioco.
  3. Al touch, mostra i comandi touch e avvia il gioco.

Non hai mai nemmeno bisogno di menzionare l’opzione per l’utente e hai rilevato automaticamente il loro controllo preferito perfettamente.

Usa la funzionalità di rilevamento con Modernizr: http://www.modernizr.com/docs/#touch

Anche se questo non è un modo affidabile per verificare se l’utente ha una tastiera, è sicuramente affidabile per vedere se il browser è in grado di toccare.

Se hai solo frecce (sinistra / destra / su / giù) potresti prendere in considerazione l’aggiunta di eventi tattili all’interno del campo di gioco? Questo non occuperebbe spazio ovviamente poiché è sovrapposto al gioco, quindi potrebbe essere “sempre attivo”.

  • Un utente di computer non saprebbe nemmeno che è lì, anche se lui / lei potrebbe usarli per giocare al tuo gioco con un topo credo.

  • D’altra parte l’utente del dispositivo touch può usare molto più facilmente le “aree” (metà superiore, metà sinistra, metà inferiore e metà destra per esempio) a causa di … beh .. toccando invece di usare un mouse.

Questo potrebbe richiedere alcune spiegazioni, poiché probabilmente non vorresti che i punti fossero visibili all’utente, ma sembra un’opzione valida.

Anche se hai 4 pulsanti e un “fuoco”, puoi farlo, ad esempio aggiungendo una sezione “media”.

cerca eventi specifici del touch come touchstart o gesturestart e mostra i controlli su schermo se rilevato.

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

Non sono sicuro che l’API di system-info sia stata implementata da qualsiasi browser: http://www.w3.org/TR/system-info-api/

piuttosto che visualizzare la tastiera su schermo per impostazione predefinita, aggiungere un pulsante per triggersre o distriggersre la visualizzazione della tastiera su schermo.

Potrebbe anche essere prudente dare alla tastiera su schermo la possibilità di ridimensionarla.

Modifica per rispondere alla domanda:

La tastiera dovrebbe essere nascosta di default se la maggior parte degli utenti sarà su un computer,

Visibile di default se la maggior parte degli utenti sarà su un dispositivo mobile.

Invece di provare a indovinare, rendi un’opzione di configurazione che l’utente può scegliere.

Un modo alternativo sarebbe quello di associare gli eventi di scorrimento e i codici di accesso alle stesse funzioni, in modo che entrambi funzionerebbero allo stesso tempo (certo che dipende dal fatto che il gioco accetti gli swipes o che abbia alcuni controlli di joypad sullo schermo).

Questo copre anche il disaccordo menzionato nei commenti della risposta, ho appena notato.

Nella maggior parte dei casi i comandi a schermo su schermo sono troppo difficili da usare (S-NES Emu).

I migliori che ho usato finora sono stati quelli di Bard’s Tale per Droid.

Suggerimento: il modo migliore per controllare il movimento direzionale in un gioco sarebbe l’evento tap-hold. Quindi si può toccare-tenere premuto … ha bisogno di qualche linea di costruzione invisibile tra il cursore e il centro dello schermo – al fine di misurare i gradi per il vettore di movimento.

Probabilmente si potrebbe persino controllare la velocità in base al valore della pressione, ma al momento non si è sicuri se è ansible accedere alla proprietà da JavaScript o se questo è disponibile solo in Android SDK?

In Parallel Kingdom si muove con un touch singolo (ma il carattere non è sempre nel mezzo dello schermo, come sarebbe con il metodo tap-hold menzionato sopra).

È ansible utilizzare javascript per scoprire l’altezza della porta di visualizzazione di Windows e quindi noi una dichiarazione if dicendo:

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

Edit: Left out) alla fine di $(window).height() < = "960"