touch support

This commit is contained in:
Daniel Bulant 2021-04-09 09:08:34 +02:00
parent 05c41d003b
commit 7e3edf4236
4 changed files with 57 additions and 47 deletions

14
package-lock.json generated
View file

@ -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",

View file

@ -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"

View file

@ -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);

View file

@ -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) {