From 7e3edf4236dc8abae878ab30411e11e290d8d0f7 Mon Sep 17 00:00:00 2001 From: Daniel Bulant Date: Fri, 9 Apr 2021 09:08:34 +0200 Subject: [PATCH] touch support --- package-lock.json | 14 ++++++++ package.json | 1 + src/game/gameScene.js | 8 ++--- src/game/input.js | 81 ++++++++++++++++++++----------------------- 4 files changed, 57 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3f8d76..2cbb039 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index c0c4a45..845d52d 100644 --- a/package.json +++ b/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" diff --git a/src/game/gameScene.js b/src/game/gameScene.js index 006e226..3f94f55 100644 --- a/src/game/gameScene.js +++ b/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("up")) movement.y--; - if(keys.isKeyPressed("left")) movement.x--; - if(keys.isKeyPressed("right")) movement.x++; + if(keys.isKeyPressed("down") || keys.wasKeyPressed("down")) movement.y++; + if(keys.isKeyPressed("up") || keys.wasKeyPressed("up")) movement.y--; + if(keys.isKeyPressed("left") || keys.wasKeyPressed("left")) 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); diff --git a/src/game/input.js b/src/game/input.js index 224b918..7eb23da 100644 --- a/src/game/input.js +++ b/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; - // rotation += 180; - // this.setAxis("rotation", rotation); - // }); - // this.addDocumentEventListener("mousedown", (ev) => { - // switch(ev.button) { - // case 0: - // if(this.pressKeyBind("mouseLeft")) ev.preventDefault(); - // break; - // case 1: - // if(this.pressKeyBind("mouseMiddle")) ev.preventDefault(); - // break; - // case 2: - // if(this.pressKeyBind("mouseRight")) ev.preventDefault(); - // break; - // case 3: - // if(this.pressKeyBind("mouseSpecial1")) ev.preventDefault(); - // break; - // case 4: - // if(this.pressKeyBind("mouseSpecial2")) ev.preventDefault(); - // break; - // } - // }); - // this.addDocumentEventListener("mouseup", (ev) => { - // switch(ev.button) { - // case 0: - // if(this.unpressKeyBind("mouseLeft")) ev.preventDefault(); - // break; - // case 1: - // if(this.unpressKeyBind("mouseMiddle")) ev.preventDefault(); - // break; - // case 2: - // if(this.unpressKeyBind("mouseRight")) ev.preventDefault(); - // break; - // case 3: - // if(this.unpressKeyBind("mouseSpecial1")) ev.preventDefault(); - // break; - // case 4: - // if(this.unpressKeyBind("mouseSpecial2")) ev.preventDefault(); - // break; - // } - // }); + + this.hammertime.on("tap", (ev) => { + var { x, y } = ev.center; + x -= innerWidth / 2; + y -= innerHeight / 2; + var multiplier = 1 / (Math.abs(x) + Math.abs(y)); + x *= multiplier; + y *= multiplier; + var direction; + console.log(x, y); + if(x >= 0.5) { + direction = "right"; + } else if(x <= -0.5) { + direction = "left"; + } else if(y >= 0.5) { + direction = "down"; + } else if(y <= -0.5) { + direction = "up"; + } + this.keysWasPressed.set(direction, true); + }); + this.hammertime.on('swipeleft', (ev) => { + this.keysWasPressed.set("left", true); + }); + this.hammertime.on('swiperight', (ev) => { + this.keysWasPressed.set("right", true); + }); + this.hammertime.on('swipeup', (ev) => { + this.keysWasPressed.set("up", true); + }); + this.hammertime.on('swipedown', (ev) => { + this.keysWasPressed.set("down", true); + }); + this.hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL }); } mountHandlers() { for(var { type, listener, options } of this.handlers) {