touch support

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "AGPL-3.0-or-later ",
       "dependencies": {
+        "hammerjs": "^2.0.8",
         "howler": "^2.2.1",
         "phaser": "^3.54.0",
         "sirv-cli": "^1.0.0"
@@ -1751,6 +1752,14 @@
       "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
       "dev": true
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -4631,6 +4640,11 @@
       "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
       "dev": true
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",

package.json

@@ -23,6 +23,7 @@
     "workbox-strategies": "^6.1.1"
   },
   "dependencies": {
+    "hammerjs": "^2.0.8",
     "howler": "^2.2.1",
     "phaser": "^3.54.0",
     "sirv-cli": "^1.0.0"

src/game/gameScene.js

@@ -250,10 +250,10 @@ export class GameScene extends Phaser.Scene {
         this.container.y = this.cameras.main.height / 2 - this.container.height / 2;
 
         var movement = { x: 0, y: 0};
-        if(keys.isKeyPressed("down")) movement.y++;
+        if(keys.isKeyPressed("down") || keys.wasKeyPressed("down")) movement.y++;
-        if(keys.isKeyPressed("up")) movement.y--;
+        if(keys.isKeyPressed("up") || keys.wasKeyPressed("up")) movement.y--;
-        if(keys.isKeyPressed("left")) movement.x--;
+        if(keys.isKeyPressed("left") || keys.wasKeyPressed("left")) movement.x--;
-        if(keys.isKeyPressed("right")) movement.x++;
+        if(keys.isKeyPressed("right") || keys.wasKeyPressed("right")) movement.x++;
 
         if((movement.x !== 0 && movement.y === 0) || (movement.x === 0 && movement.y !== 0)) {
             this.movePlayer(movement.x, movement.y);

src/game/input.js

@@ -1,3 +1,5 @@
+import Hammer from "hammerjs";
+
 const keybinds = {
     "right": "ArrowRight",
     "left": "ArrowLeft",
@@ -11,6 +13,8 @@ class KeyHandler {
         this.keys = new Map();
         this.treshold = 0.3;
 
+        this.hammertime = new Hammer(document);
+
         this.axis = new Map([
             ["x", ["moveRight", "moveLeft"]],
             ["y", ["moveUp", "moveDown"]],
@@ -86,49 +90,40 @@ class KeyHandler {
                 return false;
             };
         });
-        // this.addDocumentEventListener("mousemove", (ev) => {
+
-        //     var rotation = Math.atan2(ev.pageY - window.innerHeight / 2, ev.pageX - window.innerWidth / 2) * 180 / Math.PI;
+        this.hammertime.on("tap", (ev) => {
-        //     rotation += 180;
+            var { x, y } = ev.center;
-        //     this.setAxis("rotation", rotation);
+            x -= innerWidth / 2;
-        // });
+            y -= innerHeight / 2;
-        // this.addDocumentEventListener("mousedown", (ev) => {
+            var multiplier = 1 / (Math.abs(x) + Math.abs(y));
-        //     switch(ev.button) {
+            x *= multiplier;
-        //         case 0:
+            y *= multiplier;
-        //             if(this.pressKeyBind("mouseLeft")) ev.preventDefault();
+            var direction;
-        //             break;
+            console.log(x, y);
-        //         case 1:
+            if(x >= 0.5) {
-        //             if(this.pressKeyBind("mouseMiddle")) ev.preventDefault();
+                direction = "right";
-        //             break;
+            } else if(x <= -0.5) {
-        //         case 2:
+                direction = "left";
-        //             if(this.pressKeyBind("mouseRight")) ev.preventDefault();
+            } else if(y >= 0.5) {
-        //             break;
+                direction = "down";
-        //         case 3:
+            } else if(y <= -0.5) {
-        //             if(this.pressKeyBind("mouseSpecial1")) ev.preventDefault();
+                direction = "up";
-        //             break;
+            }
-        //         case 4:
+            this.keysWasPressed.set(direction, true);
-        //             if(this.pressKeyBind("mouseSpecial2")) ev.preventDefault();
+        });
-        //             break;
+        this.hammertime.on('swipeleft', (ev) => {
-        //     }
+            this.keysWasPressed.set("left", true);
-        // });
+        });
-        // this.addDocumentEventListener("mouseup", (ev) => {
+        this.hammertime.on('swiperight', (ev) => {
-        //     switch(ev.button) {
+            this.keysWasPressed.set("right", true);
-        //         case 0:
+        });
-        //             if(this.unpressKeyBind("mouseLeft")) ev.preventDefault();
+        this.hammertime.on('swipeup', (ev) => {
-        //             break;
+            this.keysWasPressed.set("up", true);
-        //         case 1:
+        });
-        //             if(this.unpressKeyBind("mouseMiddle")) ev.preventDefault();
+        this.hammertime.on('swipedown', (ev) => {
-        //             break;
+            this.keysWasPressed.set("down", true);
-        //         case 2:
+        });
-        //             if(this.unpressKeyBind("mouseRight")) ev.preventDefault();
+        this.hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
-        //             break;
-        //         case 3:
-        //             if(this.unpressKeyBind("mouseSpecial1")) ev.preventDefault();
-        //             break;
-        //         case 4:
-        //             if(this.unpressKeyBind("mouseSpecial2")) ev.preventDefault();
-        //             break;
-        //     }
-        // });
     }
     mountHandlers() {
         for(var { type, listener, options } of this.handlers) {