add mobile controls

index.html

@@ -15,47 +15,37 @@
           support the <canvas> element
         </div>
       </canvas>
+    </div>
 
-      <div id="instructions">
-        <b>LEFT/RIGHT</b> to move, <b>SPACE</b> to jump, collect gold and jump
-        on monsters.
+    <div class="dpad-wrapper controls-wrapper">
+      <div class="dpad-top-bottom">
+        <button class="dpad-button up" id="dpad-up"></button>
       </div>
 
-<div class="controls-wrapper"> 
-  <div class="dpad-wrapper">
-    <div class="dpad-top-bottom">
-    <button class="dpad-button up"></button>
-    </div>
-    <div class="dpad-middle">
-    <button class="dpad-button left"></button>
-    <button class="dpad-button right"></button>  
-    </div>
-    <div class="dpad-top-bottom">
-    <button class="dpad-button down"></button>  
-    </div>
-  </div
-  
-  
-  <div id="buttons">
-    <div class="buttons-wrapper">
-      <button class="button">A</button>
-      <button class="button">B</button>
-    </div>
-  </div>
-</div>
+      <div class="dpad-middle">
+        <button class="dpad-button left" id="dpad-left"></button>
+        <button class="dpad-button right" id="dpad-right"></button>
+      </div>
 
-     
+      <div class="dpad-top-bottom">
+        <button class="dpad-button down" id="dpad-down"></button>
+      </div>
+    </div>
+
+    <div class="buttons-wrapper controls-wrapper">
+      <button class="button button-a" id="button-a">A</button>
+      <button class="button button-b" id="button-b">B</button>
     </div>
 
     <script src="fpsmeter.min.js"></script>
-  
-    <script src="js/utils.js"></script> 
+
+    <script src="js/utils.js"></script>
     <script src="levels/levelObjects.js"></script>
     <script src="levels/level1.js"></script>
     <script src="levels/level2.js"></script>
     <script src="levels/level3.js"></script>
     <script src="js/variables.js"></script>
-   
+
     <script src="js/input.js"></script>
     <script src="js/render.js"></script>
     <script src="js/update.js"></script>