add mobile controls

2023-02-18 20:01:28 +01:00
parent e4487b17dc
commit 35bf935ccc
5 changed files with 211 additions and 40 deletions
@@ -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
@@ -7,11 +7,12 @@
 - [ ] 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
@@ -15,36 +15,26 @@
          support the &lt;canvas&gt; element
        </div>
      </canvas>
-
-      <div id="instructions">
-        <b>LEFT/RIGHT</b> to move, <b>SPACE</b> to jump, collect gold and jump
-        on monsters.
    </div>

-<div class="controls-wrapper"> 
-  <div class="dpad-wrapper">
+    <div class="dpad-wrapper controls-wrapper">
      <div class="dpad-top-bottom">
-    <button class="dpad-button up"></button>
+        <button class="dpad-button up" id="dpad-up"></button>
      </div>
+
      <div class="dpad-middle">
-    <button class="dpad-button left"></button>
-    <button class="dpad-button right"></button>  
+        <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"></button>  
-    </div>
-  </div
-  
-  
-  <div id="buttons">
-    <div class="buttons-wrapper">
-      <button class="button">A</button>
-      <button class="button">B</button>
+        <button class="dpad-button down" id="dpad-down"></button>
      </div>
    </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>
@@ -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?

@@ -5,9 +5,8 @@
  --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'),
@@ -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;
-  width: 240px;
+  height: 200px;
+  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 {