javascript – Detect whether browser has keyboard/arrow keys in web page-ThrowExceptions

Exception or error:

I have a full-screen game in HTML+JavaScript, which uses the arrow keys as primary controls. This cannot be used on keyboardless Android devices (I haven’t tested on iOS), and even if the soft keyboard had arrow keys it would take up unnecessary space. Therefore, I have added onscreen control buttons. However, the buttons are unnecessary (and absurdly large) on desktop browsers, so I would like them to not pop up unless they are needed.

What heuristics can I use to decide whether they are needed — that is, whether it is impossible or awkward for the user to input arrow-key events — other than recognizing specific User-Agents (which is straightforward, but not future-proof)?

I will of course allow the user to hide/show the buttons; I am looking for useful heuristics for choosing the default setting.

How to solve:

No need for any user-agent sniffing, config options or any kind of guessing. Just do this:

  1. Have a title screen which says “press to continue”.
  2. On click or key press, hide touch controls and start game.
  3. On touch, show touch controls and start game.

You never even needed to mention the option to the user and you auto-detected their preferred control perfectly.

###

Use feature detection with Modernizr: http://www.modernizr.com/docs/#touch

While this is not a reliable way to check if the user has a keyboard it is definitely reliable to see if the browser is capable of touch.

###

If you have only arrows (left/right/up/down) you might consider adding touch-events inside the game field? This would not take up space obviously as it is layered on top of the game, so it could be ‘always on’.

  • A computer user would not even know it is there, though he/she could use them to play your game with a mouse I guess.

  • The touch-device user on the other hand can much more easily use the “areas” (mid top, mid left, mid bottom and mid right for instance) because of .. well.. touching instead of using a mouse.

This might need some explaining, as you probably would not want the points to be visible to the user, but it feels like a valid option.

Even if you have 4 buttons and a ‘fire’, you could do this, for instance by adding a ‘middle’ section.

###

look for touch specific events such as touchstart or gesturestart and show the onscreen controls if detected.

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

I am not sure if the system-info api has been implemented by any browsers:
http://www.w3.org/TR/system-info-api/

###

rather than displaying the on-screen keyboard by default, add a button to toggle the display of the on-screen keyboard.

It might also be prudent to give the on-screen keyboard the ability to be resized.

Edit to answer question:

Keyboard should be hidden by default if most of your users are going to be on a computer,

Visible by default if most of your users are going to be on a mobile device.

###

Instead of trying to guess, make it a config option for the user to choose.

###

An alternate way would be to bind swipe events & keycodes to the same functions – so both would work at the same time (sure that depends if the game shall accept swipes – or has some joypad controls on screen).

This even covers the dis-advance mentioned in the answer’s comments, I’ve just noticed.

In most cases on-screen tap-controls are too difficult to use (S-NES Emu).

The best ones I’ve used so far were the ones in Bard’s Tale for Droid.

Tip: best for controlling directional movement in a game would be the tap-hold event.
So one can tap-hold … needs some invisible construction line between the cursor and the center of the screen – in order to measure the degrees for the vector of movement.

One could probably even control the speed by the value of the pressure – just currently not sure if the property can be accessed from within JavaScript – or if this only available in Android SDK?

In Parallel Kingdom one moves by single-tap (but the character isn’t always in the middle of the screen, like it would be with the tap-hold method mentioned above).

###

You could use javascript to find out the height of the windows view port and then us an if statement saying:

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

Edit: Left out ) at end of $(window).height() <= "960"

Leave a Reply

Your email address will not be published. Required fields are marked *