增加移动端滑动手势事件适配

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

README.md

@@ -51,7 +51,7 @@ npm run build
 
 编译完成后，使用浏览器打开dist目录下的`index.html`即可游玩；
 
-根据老师的例子优化部分逻辑，及增加食物刷新时与蛇身重叠规避的逻辑，欢迎提出意见或建议
+根据老师的例子优化部分逻辑，及增加食物刷新时与蛇身重叠规避的逻辑，同时使用any-touch兼容移动端滑动手势事件，欢迎提出意见或建议
 
 #### **继续开发**
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "snake",
   "version": "1.0.0",
-  "description": "",
+  "description": "使用TypeScript + Webpack + Less实现贪吃蛇的例子",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -14,6 +14,7 @@
   "devDependencies": {
     "@babel/core": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
+    "any-touch": "^2.2.0",
     "babel-loader": "^8.2.5",
     "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.22.8",

src/modules/GameController.ts

@@ -1,6 +1,8 @@
 import Snake from "./Snake";
 import Food from "./Food";
 import ScorePanel from "./ScorePanel";
+import AnyTouch from "any-touch";
+import type { AnyTouchEvent } from "any-touch";
 
 /**
  * 游戏控制器
@@ -30,6 +32,12 @@ class GameController
     {
         // 绑定键盘事件，当按下 上/下/左/右 时改变蛇的行动方向
         document.addEventListener("keydown", this.keyDownHandle.bind(this));
+
+        // 使用any-touch绑定滑动手势事件
+        const page = document.querySelector("html") as HTMLElement;
+        const at = new AnyTouch(page);
+        at.on(["panup", "pandown", "panright", "panleft"], this.panHandle.bind(this));
+
         this.snakeRun();
     }
 
@@ -58,6 +66,24 @@ class GameController
         this.lastKeyDown = event.key;
     }
 
+    /**
+     * 滑动手势事件逻辑（最终模拟成键盘事件）
+     * @param event 事件属性
+     */
+    protected panHandle(event: AnyTouchEvent): void
+    {
+        const keyMap = new Map();
+        keyMap.set("up", "ArrowUp");
+        keyMap.set("down", "ArrowDown");
+        keyMap.set("left", "ArrowLeft");
+        keyMap.set("right", "ArrowRight");
+
+        let keyboardEvent = new KeyboardEvent(event.direction, {
+            key: keyMap.get(event.direction)
+        });
+        this.keyDownHandle(keyboardEvent);
+    }
+
     /**
      * 检查蛇是否吃到食物
      * @param x X坐标

src/modules/Snake.ts

@@ -131,20 +131,20 @@ class Snake
         let y = this.Y;
 
         switch(this.direction) {
-            case "ArrowUp" :
-            case "Up" :
+            case "ArrowUp":
+            case "Up":
                 y -= 10;
                 break;
-            case "ArrowDown" :
-            case "Down" :
+            case "ArrowDown":
+            case "Down":
                 y += 10;
                 break;
-            case "ArrowLeft" :
-            case "Left" :
+            case "ArrowLeft":
+            case "Left":
                 x -= 10;
                 break;
-            case "ArrowRight" :
-            case "Right" :
+            case "ArrowRight":
+            case "Right":
                 x += 10;
                 break;
         }

src/style/index.less

@@ -9,6 +9,11 @@
     box-sizing: border-box;
 }
 
+// 页面最大化，用于滑动手势事件
+html {
+    height: 100%;
+}
+
 // 页面公共样式
 body {
     font: bold 20px "Courier";

tsconfig.json

@@ -3,6 +3,9 @@
         "module": "ES2015",
         "target": "ES2015",
         "strict": true,
-        "noEmitOnError": true
+        "removeComments": true,
+        "noImplicitAny": true,
+        "noEmitOnError": true,
+        "moduleResolution": "node"
     }
 }