index.html

<style>
td {
  font-size: 72pt;
  text-align: center;
  padding: 20px;
}
</style>
<table>
  <tr>
    <td>
    <td>
    <td><a href="/up/1000">&#x21C8;
  <tr>
    <td>
    <td>
    <td><a href="/up/100">&#x2191;
  <tr>
    <td><a href="/left/1000">&#x21C7;
    <td><a href="/left/100">&#x2190;
    <td><a href="/fire/1">&#x2620;
    <td><a href="/right/100">&#x2192;
    <td><a href="/right/1000">&#x21C9;
  <tr>
    <td>
    <td>
    <td><a href="/down/100">&#x2193;
  <tr>
    <td>
    <td>
    <td><a href="/down/1000">&#x21CA;
</table>
<script src="https://www.localist.co.nz/public/javascripts/jquery.hotkeys.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$("a").click(function (event) {
  event.preventDefault();
  
  $.ajax($(this).attr("href"));
});

var commands = [
      ["shift+s shift+down", "/down/500"],
      ["s down", "/down/100"],
      ["shift+w shift+up", "/up/500"],
      ["w up", "/up/100"],
      ["shift+a shift+left", "/left/500"],
      ["a left", "/left/100"],
      ["shift+d shift+right", "/right/500"],
      ["d right", "/right/100"],
      ["1 space", "/fire/1"],
      ["2", "/fire/2"],
      ["3", "/fire/3"],
      ["4", "/fire/4"],
  ]
  $.each(commands, function(index, command){
    $(document).bind('keydown', command[0], function(){
      $.get(command[1])
    })
  })
</script>