add mobile controls

README.md

@@ -36,7 +36,7 @@ Simple JS platformer to modify and extend.
   - [x] Die properties werden als Array exportiert. Da brauche ich in der setup Funktion noch eine Function um die zu Konviertieren.
 
 - [x] Globales Objekt bauen mit einem einzigen Wert ("life = 3" z.B.), den ich immer Anzeige und der über die Level hinaus bestehen bleibt.
-
+- [ ] fix Frame Rate on Mobile (<https://spicyyoghurt.com/tutorials/html5-javascript-game-development/create-a-proper-game-loop-with-requestanimationframe>)
 - [ ] Gravity Variable für verschiedene Umgebungen (Land, Wasser, Space)
 
 - [ ] Verschiedene Biomes

docs/roadmap.md

@@ -2,16 +2,17 @@
 
 - [ ] Test Map
 - [ ] Vehicles
-- [ ] Swimming 
+- [ ] Swimming
 - [x] Oxygen-Meter
 - [ ] ordentliches HUD bauen
    - [ ] Elemente müssen variable und optional sein.
 - [ ] Global Progress Object
+- [ ] One-Time Pickups (für z.B. Powerups die nicht respawned werden)
 - [ ] Menus & Textboxes
 - [ ] Save & Load
 - [ ] Mobile Controls
 - [ ] Collision Boxes (nicht identisch mit der Sprite-Größe)
-- [ ] Spores
+- [ ] Spores (?? tbd)
 - [ ] Webhosting
 - [ ] Boss Battles
 
@@ -34,6 +35,37 @@
 
 - boss-levels
 
+## General Control Scheme
+- D-Pad: ArrowKeys
+- Buttons (A, B): X, Y
+- Start: Enter
+- Select: Space
+
+## Player Controls
+- X = Jump
+- Y = Attack
+- ArrowUp = Enter Door/Use
+- Space = Select Weapon
+
+## Vehicle Controls
+- X = Engine Acceleration (in 0.5er Steps von 0 bis +2)
+- Y = Weapon/Tool
+- ArrowKeys für Richtungen
+- Space = Select Weapon/Tool
+
+## HUD
+- Hitpoints = Text "HP" + Boxes
+- Collected Crystals = Icon + Number
+- active Weapon + Ammo = Icon + Number
+- Oxygen (nur wenn diving) = Icon + Bar
+- Extralifes = Icon + Number
+- möglicherweise Depth = Number + Text "m"
+
+Anordnung:
+HP OOOOOOO   (W)25    (C)36        (L)3
+O2 =========
+
+
 ## Objects & Variables
 
 - GlobalProgress

index.html

@@ -15,47 +15,37 @@
           support the <canvas> element
         </div>
       </canvas>
+    </div>
 
-      <div id="instructions">
+    <div class="dpad-wrapper controls-wrapper">
-        <b>LEFT/RIGHT</b> to move, <b>SPACE</b> to jump, collect gold and jump
+      <div class="dpad-top-bottom">
-        on monsters.
+        <button class="dpad-button up" id="dpad-up"></button>
       </div>
 
-<div class="controls-wrapper"> 
+      <div class="dpad-middle">
-  <div class="dpad-wrapper">
+        <button class="dpad-button left" id="dpad-left"></button>
-    <div class="dpad-top-bottom">
+        <button class="dpad-button right" id="dpad-right"></button>
-    <button class="dpad-button up"></button>
+      </div>
-    </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-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>

js/main.js

@@ -67,6 +67,129 @@ function main() {
     }
   })
 
+  // * Touch Controls
+
+  function touchControl(ev, button, down) {
+    switch (button) {
+      case 'jump':
+        player.jump = down
+        ev.preventDefault()
+        return false
+      case 'shoot':
+        shoot(player)
+        ev.preventDefault()
+        return false
+      case 'left':
+        player.left = down
+        ev.preventDefault()
+        return false
+      case 'right':
+        player.right = down
+        ev.preventDefault()
+        return false
+      case 'up':
+        player.up = down
+        ev.preventDefault()
+        return false
+      case 'down':
+        player.down = down
+        ev.preventDefault()
+        return false
+    }
+  }
+
+  const buttonA = document.getElementById('button-a')
+  const buttonB = document.getElementById('button-b')
+  const dpadLeft = document.getElementById('dpad-left')
+  const dpadRight = document.getElementById('dpad-right')
+  const dpadUp = document.getElementById('dpad-up')
+  const dpadDown = document.getElementById('dpad-down')
+
+  buttonA.addEventListener(
+    'touchstart',
+    function (ev) {
+      return touchControl(ev, 'jump', true)
+    },
+    false
+  )
+  buttonA.addEventListener(
+    'touchend',
+    function (ev) {
+      return touchControl(ev, 'jump', false)
+    },
+    false
+  )
+  buttonB.addEventListener(
+    'touchstart',
+    function (ev) {
+      return touchControl(ev, 'shoot', true)
+    },
+    false
+  )
+  buttonB.addEventListener(
+    'touchend',
+    function (ev) {
+      return touchControl(ev, 'shoot', false)
+    },
+    false
+  )
+  dpadLeft.addEventListener(
+    'touchstart',
+    function (ev) {
+      return touchControl(ev, 'left', true)
+    },
+    false
+  )
+  dpadLeft.addEventListener(
+    'touchend',
+    function (ev) {
+      return touchControl(ev, 'left', false)
+    },
+    false
+  )
+  dpadRight.addEventListener(
+    'touchstart',
+    function (ev) {
+      return touchControl(ev, 'right', true)
+    },
+    false
+  )
+  dpadRight.addEventListener(
+    'touchend',
+    function (ev) {
+      return touchControl(ev, 'right', false)
+    },
+    false
+  )
+  dpadUp.addEventListener(
+    'touchstart',
+    function (ev) {
+      return touchControl(ev, 'up', true)
+    },
+    false
+  )
+  dpadUp.addEventListener(
+    'touchend',
+    function (ev) {
+      return touchControl(ev, 'up', false)
+    },
+    false
+  )
+  dpadDown.addEventListener(
+    'touchstart',
+    function (ev) {
+      return touchControl(ev, 'down', true)
+    },
+    false
+  )
+  dpadDown.addEventListener(
+    'touchend',
+    function (ev) {
+      return touchControl(ev, 'down', false)
+    },
+    false
+  )
+
   // ! Vielleicht kann ich statt des setup() an dieser Stelle auch eine gameStart() Funktion erstellen, die beim erstmaligen Start alles erledigt. Später wird dann ja immer die _initLevel() aufgerufen.
   setup(currentLevel.levelData) // ! Was brauche ich hier, damit das variabel alle Level laden kann?
 

style.css

@@ -5,14 +5,13 @@
   --start-button-color: #597ea7;
 }
 
-
 @font-face {
-  font-family: "C64 TrueType";
+  font-family: 'C64 TrueType';
   src: url('fonts/C64_Pro_Mono-STYLE.eot');
   src: url('fonts/C64_Pro_Mono-STYLE.eot') format('embedded-opentype'),
-       url('fonts/C64_Pro_Mono-STYLE.woff2') format('woff2'),
+    url('fonts/C64_Pro_Mono-STYLE.woff2') format('woff2'),
-       url('fonts/C64_Pro_Mono-STYLE.woff') format('woff'),
+    url('fonts/C64_Pro_Mono-STYLE.woff') format('woff'),
-       url('fonts/C64_Pro_Mono-STYLE.ttf') format('truetype');
+    url('fonts/C64_Pro_Mono-STYLE.ttf') format('truetype');
 }
 
 body {
@@ -20,7 +19,6 @@ body {
 }
 
 .controls-wrapper {
-  display: none;
 }
 
 .dpad-wrapper {
@@ -32,7 +30,14 @@ body {
   flex-direction: column;
   padding: 20px;
   justify-content: center;
+
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
 }
+
 .dpad-top-bottom {
   margin-left: auto;
   margin-right: auto;
@@ -74,13 +79,34 @@ body {
   border-radius: 50%;
   margin: auto;
 }
+
+.button-a {
+  margin-top: 50%;
+}
+
+.button-b {
+  margin-bottom: 50%;
+}
+
 .buttons-wrapper {
   background-color: var(--shell-color);
   border-radius: 60px;
-  height: 100px;
+  height: 200px;
-  width: 240px;
+  width: 180px;
   display: flex;
   padding: 10px;
+
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@media only screen and (min-width: 1000px) {
+  .dpad-wrapper,
+  .buttons-wrapper {
+    display: none;
+  }
 }
 
 #platformer {