add mobile controls

2023-02-18 20:01:28 +01:00
parent e4487b17dc
commit 35bf935ccc
5 changed files with 211 additions and 40 deletions
@@ -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?