title: Adding buttons to a simple HTML5 game
body: <p>I cant figure out a good way to add buttons to a simple HTML5 game that I'm trying to adapt for another use. </p>
  
  <p>Instead of using the arrow keys to control the player, I want to have an actual 'up, down, left, right' buttons that have to be clicked (or more accurately, touched on a mobile device). </p>
  
  <p>Here is the input code I'm trying to adapt.</p>
  
  <p>input.js:</p>
  
  <pre><code>(function() {
      var pressedKeys = {};
  
      function setKey(event, status) {
          var code = event.keyCode;
          var key;
  
          switch(code) {
          case 32:
              key = 'SPACE'; break;
          case 37:
              key = 'LEFT'; break;
          case 38:
              key = 'UP'; break;
          case 39:
              key = 'RIGHT'; break;
          case 40:
              key = 'DOWN'; break;
          default:
              // Convert ASCII codes to letters
              key = String.fromCharCode(code);
          }
  
          pressedKeys[key] = status;
      }
  
  
      document.addEventListener('submit', function(e){
          console.log(e);
          return false;
      })
  
      document.addEventListener('keydown', function(e) {
          setKey(e, true);
      });
  
      document.addEventListener('keyup', function(e) {
          setKey(e, false);
      });
  
      window.addEventListener('blur', function() {
          pressedKeys = {};
      });
  
      window.input = {
          isDown: function(key) {
              return pressedKeys[key.toUpperCase()];
          }
      };
  })();
  </code></pre>
  
  <p>And here is the code from app.js that references the 'isDown' function:</p>
  
  <pre><code>function handleInput(dt) {
      if(input.isDown('DOWN') || input.isDown('s')) {
          player.pos[1] += playerSpeed * dt;
      }
  
      if(input.isDown('UP') || input.isDown('w')) {
          player.pos[1] -= playerSpeed * dt;
      }
  
      if(input.isDown('LEFT') || input.isDown('a')) {
          player.pos[0] -= playerSpeed * dt;
      }
  
      if(input.isDown('RIGHT') || input.isDown('d')) {
          player.pos[0] += playerSpeed * dt;
      }
  }
  </code></pre>
  
  <p>I'm totally new to trying to make HTML5 games so any suggestions on how to handle touch / click events would be great. Also, for the buttons themselves, is it better to use divs, forms, or something else?</p>
  
  <p>Thanks</p>
  
  <p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
  
  <p>Edit / Update:</p>
  
  <p>So I inserted this into my app.js:</p>
  
  <pre><code>$("#upButton").click(function(){
          console.log("click");
          player.pos[1] -= playerSpeed * dt;
      })
  </code></pre>
  
  <p>It actually registers the click event but it generates a really weird and random number of "clicks" (anywhere from a couple doze to thousands). The particular code I'm adapting can be found at this repo: <a href="https://github.com/jlongster/canvas-game-bootstrap" rel="nofollow">https://github.com/jlongster/canvas-game-bootstrap</a></p>
  
  <p>This guy's game is pretty neat but it has a lot "advanced" things for a noob to HTML5 games like me. </p>