Unifying Input Experience from Desktop and Mobile

Key Controls for Flying

For the Paper Airplane Game web traffic is split about 50/50 between mobile and desktop. The controls of this game are simplest on a keyboard, but it would not be good user experience to ask for the popup keyboard on mobile. The solution that I chose instead was to implement a tap-and-drag interface for when the plane should turn. This option requires several browser shims but it is intuitive and that makes it worth it.

this.onKeyDown = function ( event ) {
  switch ( event.keyCode ) {
    case 13: /*enter*/ if(this.state==='paused') this.state='playing'; break;
    case 27: /*escape*/ this.state = 'paused'; break;
    case 38: /*up*/
    case 87: /*W*/ this.moveForward = true; break;
    case 37: /*left*/
    case 65: /*A*/ this.moveLeft = true; break;
    case 40: /*down*/
    case 83: /*S*/ this.moveBackward = true; break;
    case 39: /*right*/
    case 68: /*D*/ this.moveRight = true; break;
    case 82: /*R*/ this.moveUp = true; break;
    case 70: /*F*/ this.moveDown = true; break;
  }
};
this.onKeyUp = function ( event ) {
  switch( event.keyCode ) {
    case 38: /*up*/
    case 87: /*W*/ this.moveForward = false; break;
    case 37: /*left*/
    case 65: /*A*/ this.moveLeft = false; break;
    case 40: /*down*/
    case 83: /*S*/ this.moveBackward = false; break;
    case 39: /*right*/
    case 68: /*D*/ this.moveRight = false; break;
    case 82: /*R*/ this.moveUp = false; break;
    case 70: /*F*/ this.moveDown = false; break;
  }
};