From 39fbfdb72ebc7956879896d571229b4eaa9207dd Mon Sep 17 00:00:00 2001 From: fantasticbin Date: Thu, 9 Jun 2022 14:44:24 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E6=BB=91=E5=8A=A8=E6=89=8B=E5=8A=BF=E4=BA=8B=E4=BB=B6=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 ++ README.md | 2 +- package.json | 3 ++- src/modules/GameController.ts | 26 ++++++++++++++++++++++++++ src/modules/Snake.ts | 16 ++++++++-------- src/style/index.less | 5 +++++ tsconfig.json | 5 ++++- 7 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d5f19d8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +package-lock.json diff --git a/README.md b/README.md index 0323f67..d2daba0 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ npm run build 编译完成后，使用浏览器打开dist目录下的`index.html`即可游玩； -根据老师的例子优化部分逻辑，及增加食物刷新时与蛇身重叠规避的逻辑，欢迎提出意见或建议 +根据老师的例子优化部分逻辑，及增加食物刷新时与蛇身重叠规避的逻辑，同时使用any-touch兼容移动端滑动手势事件，欢迎提出意见或建议 #### **继续开发** diff --git a/package.json b/package.json index a24b4c7..ea6d0d3 100644 --- a/package.json +++ b/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", diff --git a/src/modules/GameController.ts b/src/modules/GameController.ts index 30d85eb..6c57bfe 100644 --- a/src/modules/GameController.ts +++ b/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坐标 diff --git a/src/modules/Snake.ts b/src/modules/Snake.ts index cd4828a..07b8652 100644 --- a/src/modules/Snake.ts +++ b/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; } diff --git a/src/style/index.less b/src/style/index.less index 6953f76..e8c96a2 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -9,6 +9,11 @@ box-sizing: border-box; } +// 页面最大化，用于滑动手势事件 +html { + height: 100%; +} + // 页面公共样式 body { font: bold 20px "Courier"; diff --git a/tsconfig.json b/tsconfig.json index e6d66b1..5f2553a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,9 @@ "module": "ES2015", "target": "ES2015", "strict": true, - "noEmitOnError": true + "removeComments": true, + "noImplicitAny": true, + "noEmitOnError": true, + "moduleResolution": "node" } } \ No newline at end of file