index.html

<style type="text/css">
  .keys {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 210px;
    text-align: center;
  }

  .key-row { margin-bottom: 5px; }

  .key {
    width: 100px;
    height: 100px;
    font-size: 100px;
    border: 1px solid black;
    display: inline-block;
    cursor: pointer;
  }

  .key.active { background: lightblue; }
</style>

<div class="keys">
  <div class="key-row">
    <div class="key" id="key-w" data-key-code="87">W</div>
  </div>
  <div class="key-row">
    <div class="key" id="key-a" data-key-code="65">A</div>
    <div class="key" id="key-s" data-key-code="83">S</div>
    <div class="key" id="key-d" data-key-code="68">D</div>
  </div>
</div>

<script src="/vendor/lodash.js"></script>
<script src="/vendor/jquery.js"></script>
<script>
  var host = location.origin.replace(/^http/, 'ws');
  var webSocket = new WebSocket(host);
  var KEY_W = 87;
  var KEY_A = 65;
  var KEY_S = 83;
  var KEY_D = 68;

  $(function() {
    var $keys = $('.keys');
    var $document = $(document);
    var keyMappings = {};
    keyMappings[KEY_W] = $('#key-w');
    keyMappings[KEY_A] = $('#key-a');
    keyMappings[KEY_S] = $('#key-s');
    keyMappings[KEY_D] = $('#key-d');

    // show key as pressed. continuously send key to server
    var activate = function(keyCode) {
      if(keyMappings[keyCode]) {
        keyMappings[keyCode].addClass('active');
        webSocket.send(keyCode);
      }
    };
    // show key as released. stop sending key to server
    var deactivate = function(keyCode) {
      if(keyMappings[keyCode]) {
        keyMappings[keyCode].removeClass('active');
      }
    };
    var throttle = function(func){
      return _.throttle(func, 200, { trailing: false });
    };

    // button press handlers
    $document.keydown(throttle(
      function(event){
        activate(event.keyCode);
      }
    ));
    $keys.mousedown(throttle(
      function(event){
        activate($(event.target).data('key-code'));
      }
    ));

    // button release handlers
    $document.keyup(function(event){
      deactivate(event.keyCode);
    });
    $keys.mouseup(function(event){
      deactivate($(event.target).data('key-code'));
    });
  });
</script>