21

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.

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108
  • 1
    The best alternative is to detect if there is a mouse or not. However, detecting for real mouse events and not simulated ones is a pain. I solved this, see: http://stackoverflow.com/a/15415643/342275. – marknadal Mar 14 '13 at 17:05

8 Answers8

34

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.

AshleysBrain
  • 22,335
  • 15
  • 88
  • 124
  • 2
    This is very counter-intuitive, and I would highly suggest implementing it. – Travis J Jan 10 '12 at 22:20
  • Nice idea. The disadvantage is that it needs a splash screen, but it should be highly reliable at detecting what the user *wants* to use. I don't have the time to try it out right now (bad choice of bounty period), so I'll come back and accept it later. – Kevin Reid Jan 11 '12 at 14:04
  • I guess you don't even need a full flash screen - you could turn your loading screen in to a "Play" icon like some Flash games do, and see what they press the Play button with. – AshleysBrain Jan 12 '12 at 10:38
4

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.

Alex Lawrence
  • 1,160
  • 3
  • 10
  • 19
2

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

Mat Nadrofsky
  • 8,289
  • 8
  • 49
  • 73
Satya
  • 4,458
  • 21
  • 29
2

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.

Nanne
  • 64,065
  • 16
  • 119
  • 163
2

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/

ERR0
  • 635
  • 4
  • 18
  • I think this is the proper answer to the question - even if the suggestion of @AshleysBrain is most easy and reliable imo. According to [www.alastairc.ac](http://alastairc.ac/testing/touch_events.html) `ongesturestart` for implementing the touch detection is preferable. I would simplify the code for the check on the page to: `var e = document.createElement('div');return('ongesturestart' in e);` But I have doubts if this is future proof. The currently most robust variant I can think of is the combination of testing a normal touch event ('ontouchstart') and a media query for max-width/height – V02460 Jan 11 '12 at 04:27
1

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.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • I agree, I was going to suggest at first run have no keyboard but have an easy/obvious toggle option available to the user. – Vian Esterhuizen Jan 14 '11 at 21:17
  • Please note that my question was “... should be displayed *by default”.* I am certainly going to provide a toggle for the controls. I am asking about what the *initial state of the toggle* should be. – Kevin Reid Jan 14 '11 at 22:41
0

You can consider checking the display size. If the display size is smaller than a certain size, you can assume that it is a mobile device and can display the Arrow Buttons. Other wise use keyboard buttons.

You can also keep an option so that user can set this manually if needed.

Farhan
  • 21
  • 4
-3

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"

swenflea
  • 562
  • 1
  • 5
  • 14
  • The reason you got downvotes and why this isn't a solution is that a user might have an old monitor or have their browser sized smaller than 960px. They'd be unable to navigate because they don't have touch and you've disabled their arrow key functions. –  Feb 22 '15 at 18:57