<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Flies Fly: Prototype for User Experience (gameplay)</title>
  </head>
  <body>
    <h1>Flies Fly: Prototype for User Experience (gameplay)</h1>
    <p>Press the space bar, hold it, release it.</p>
    <div id="out"></div>
    <script>
      var outDiv = document.getElementById('out');

      function print( message ) {
        outDiv.innerHTML = message;
      }

      function no( value ) {
        var undef; // do not trust global undefined, which can be set to a value
        return value === null || value === undef;
      }

      function or( a, b ) {
        return no( a )? b: a;
      }

      function getKeyCode( event ) {
        event = or( event, window.event );
        return event.keyCode;
      }

      var SPACE_KEYCODE = 32;

      function isSpaceBar( event ) {
        return getKeyCode( event ) === SPACE_KEYCODE;
      }

      window.onkeydown = function( event ) {
        if ( isSpaceBar( event ) ) {
          print( "Space bar pressed." );
        }
      };

      window.onkeyup = function( event ) {
        if ( isSpaceBar( event ) ) {
          print( "Space bar released." );
        }
      };
    </script>
  </body>
</html>

Add User Experience experiment in HTML
Add User Experience experiment in HTML

The script successfully detects when the space bar is pressed
and released. I have tested the code only in Firefox so far,
but I also included support for older IE (untested).

The code in this prototype uses legacy APIs,
not the new DOM Events Level 3 specification in development at W3C.

Reference:

DOM Events Level 3 (Working Draft, November 2013)
http://www.w3.org/TR/DOM-Level-3-Events/

DOM Events Level 2 (W3C Recommendation, November 2000)
http://www.w3.org/TR/DOM-Level-2-Events/
