implement touch control

2022-02-13 10:49:43 +01:00
parent a7482c52f1
commit 300e05c7e3
3 changed files with 154 additions and 6 deletions
@@ -1,6 +1,7 @@
 <html lang="en">
 <head>
    <title>Minecraft</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="style.css"/>
 </head>

@@ -9,6 +9,8 @@ window.GameWindow = class {
        this.mouseLocked = false;
        this.actualMouseLocked = false;

+        this.isMobile = this.detectTouchDevice();
+
        // Get canvas wrapper
        this.wrapper = document.getElementById(this.canvasWrapperId);

@@ -63,12 +65,14 @@ window.GameWindow = class {
        // Mouse buttons
        document.addEventListener('click', function (event) {
            // Create sound engine (It has to be created after user interaction)
-            if(!minecraft.soundManager.isCreated()) {
+            if (!minecraft.soundManager.isCreated()) {
                minecraft.soundManager.create(minecraft.worldRenderer);
            }

            // Handle in-game mouse click
-            minecraft.onMouseClicked(event.button);
+            if (!scope.isMobile) {
+                minecraft.onMouseClicked(event.button);
+            }

            // Handle mouse click on screen
            if (!(minecraft.currentScreen === null)) {
@@ -84,6 +88,11 @@ window.GameWindow = class {

        // Keyboard interaction with screen
        window.addEventListener('keydown', function (event) {
+            if (event.code === "F11") {
+                return; // Toggle fullscreen
+            }
+
+            // Prevent key
            event.preventDefault();

            if (!(minecraft.currentScreen === null)) {
@@ -96,18 +105,139 @@ window.GameWindow = class {
            }
        });

+        // Touch interaction
+        let touchStart;
+        window.addEventListener('touchstart', function (event) {
+            for (let i = 0; i < event.touches.length; i++) {
+                let touch = event.touches[i];
+
+                let x = touch.pageX;
+                let y = touch.pageY;
+
+                let isRightHand = x > scope.wrapper.offsetWidth / 2;
+
+                if (isRightHand) {
+                    touchStart = Date.now();
+                } else {
+                    let tileSize = scope.wrapper.offsetWidth / 8;
+
+                    let tileX = 0;
+                    let tileY = scope.wrapper.offsetHeight - tileSize * 3;
+
+                    let relX = x - tileX;
+                    let relY = y - tileY;
+
+                    let tileIndex = Math.floor(relX / tileSize) + Math.floor(relY / tileSize) * 3;
+
+                    // Walk buttons
+                    switch (tileIndex) {
+                        case 0:
+                        case 1:
+                        case 2:
+                            Keyboard.setState("KeyW", true);
+                            break;
+                        case 3:
+                            Keyboard.setState("KeyA", true);
+                            break;
+                        case 4:
+                            Keyboard.setState("Space", true);
+                            break;
+                        case 5:
+                            Keyboard.setState("KeyD", true);
+                            break;
+                        case 6:
+                        case 7:
+                        case 8:
+                            Keyboard.setState("KeyS", true);
+                            break;
+                    }
+                }
+            }
+
+            // Create sound engine (It has to be created after user interaction)
+            if (!minecraft.soundManager.isCreated()) {
+                minecraft.soundManager.create(minecraft.worldRenderer);
+            }
+        });
+
+        // Touch movement
+        let prevTouch;
+        window.addEventListener('touchmove', function (event) {
+            for (let i = 0; i < event.touches.length; i++) {
+                let touch = event.touches[i];
+
+                let x = touch.pageX;
+                let y = touch.pageY;
+
+                // Right hand
+                let isRightHand = x > scope.wrapper.offsetWidth / 2;
+
+                if (isRightHand) {
+                    // Player movement
+                    if (prevTouch) {
+                        scope.mouseMotionX = (x - prevTouch.pageX) * 10;
+                        scope.mouseMotionY = -(y - prevTouch.pageY) * 10;
+                    }
+
+                    prevTouch = touch;
+                }
+            }
+        });
+        window.addEventListener('touchend', function (event) {
+            // Break block
+            if (!prevTouch && touchStart && (Date.now() - touchStart) < 1000) {
+                minecraft.onMouseClicked(2);
+            }
+
+            prevTouch = null;
+            touchStart = null;
+
+            // Stop pressing keys
+            for (let i = 0; i < event.changedTouches.length; i++) {
+                let touch = event.changedTouches[i];
+
+                // Left hand
+                let isLeftHand = touch.pageX < scope.wrapper.offsetWidth / 2;
+
+                // Release all keys
+                if (isLeftHand) {
+                    Keyboard.unPressAll();
+                    break;
+                }
+            }
+        });
+
+        // Break block listener
+        if (this.isMobile) {
+            setInterval(() => {
+                if (touchStart && (Date.now() - touchStart) > 1000) {
+                    touchStart = Date.now();
+                    minecraft.onMouseClicked(0);
+                }
+            }, 200);
+        }
+
        // Create keyboard
        Keyboard.create();
    }

    requestFocus() {
-        window.focus();
-        this.canvas.requestPointerLock();
-        document.body.style.cursor = 'none';
+        if (this.isMobile) {
+            document.body.requestFullscreen();
+        } else {
+            window.focus();
+            this.canvas.requestPointerLock();
+            document.body.style.cursor = 'none';
+        }
+
        this.mouseLocked = true;
    }

    exitFocus() {
+        if (this.isMobile) {
+            return;
+        }
+
        document.exitPointerLock();
        document.body.style.cursor = 'default';
    }
@@ -180,4 +310,13 @@ window.GameWindow = class {
        }
    }

+    detectTouchDevice() {
+        let match = window.matchMedia || window.msMatchMedia;
+        if (match) {
+            let mq = match("(pointer:coarse)");
+            return mq.matches;
+        }
+        return false;
+    }
+
 }
@@ -4,7 +4,7 @@ window.Keyboard = class {

    static create() {
        window.addEventListener('keydown', function (event) {
-            event.preventDefault();
+            //event.preventDefault();
            Keyboard.state[event.code] = true;
            //console.log("Key " + event.code + " down");
        });
@@ -15,6 +15,14 @@ window.Keyboard = class {
        });
    };

+    static setState(key, state) {
+        Keyboard.state[key] = state;
+    }
+
+    static unPressAll() {
+        Keyboard.state = {};
+    }
+
    static isKeyDown(key) {
        return Keyboard.state[key];
    }