init

assets/Bundles/MainGame/MainGame.scene

@@ -343,8 +343,8 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 40,
-      "height": 36
+      "width": 2,
+      "height": 2
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -374,7 +374,7 @@
       "a": 255
     },
     "_spriteFrame": {
-      "__uuid__": "57520716-48c8-4a19-8acf-41c9f8777fb0@f9941",
+      "__uuid__": "7d8f9b89-4fd1-4c9f-a3ab-38ec7cded7ca@f9941",
       "__expectedType__": "cc.SpriteFrame"
     },
     "_type": 0,
@@ -452,8 +452,8 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 40,
-      "height": 36
+      "width": 2,
+      "height": 2
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -483,7 +483,7 @@
       "a": 255
     },
     "_spriteFrame": {
-      "__uuid__": "57520716-48c8-4a19-8acf-41c9f8777fb0@f9941",
+      "__uuid__": "7d8f9b89-4fd1-4c9f-a3ab-38ec7cded7ca@f9941",
       "__expectedType__": "cc.SpriteFrame"
     },
     "_type": 0,
@@ -561,8 +561,8 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 40,
-      "height": 36
+      "width": 2,
+      "height": 2
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -592,7 +592,7 @@
       "a": 255
     },
     "_spriteFrame": {
-      "__uuid__": "57520716-48c8-4a19-8acf-41c9f8777fb0@f9941",
+      "__uuid__": "7d8f9b89-4fd1-4c9f-a3ab-38ec7cded7ca@f9941",
       "__expectedType__": "cc.SpriteFrame"
     },
     "_type": 0,
@@ -670,8 +670,8 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 40,
-      "height": 36
+      "width": 2,
+      "height": 2
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -701,7 +701,7 @@
       "a": 255
     },
     "_spriteFrame": {
-      "__uuid__": "57520716-48c8-4a19-8acf-41c9f8777fb0@f9941",
+      "__uuid__": "7d8f9b89-4fd1-4c9f-a3ab-38ec7cded7ca@f9941",
       "__expectedType__": "cc.SpriteFrame"
     },
     "_type": 0,
@@ -1290,7 +1290,7 @@
     },
     "maxFood": 200,
     "maxAnimal": 20,
-    "angleBtn": {
+    "joystick": {
       "__id__": 38
     },
     "fashBtn": {
@@ -1329,18 +1329,14 @@
     "uiCamera": {
       "__id__": 42
     },
-    "AngleBtn": {
-      "__id__": 39
-    },
-    "CirDot": {
+    "handle": {
       "__id__": 53
     },
-    "marR": 100,
     "_id": "0elywIxWZJC67+0JraRtKG"
   },
   {
     "__type__": "cc.Node",
-    "_name": "方向",
+    "_name": "Joystick",
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
@@ -1877,7 +1873,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "dot",
+    "_name": "handle",
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
@@ -1935,8 +1931,8 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 40,
-      "height": 36
+      "width": 50,
+      "height": 50
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1966,12 +1962,12 @@
       "a": 255
     },
     "_spriteFrame": {
-      "__uuid__": "57520716-48c8-4a19-8acf-41c9f8777fb0@f9941",
+      "__uuid__": "8f21f897-8cb9-448d-a674-e0574c83e228@da8cd",
       "__expectedType__": "cc.SpriteFrame"
     },
     "_type": 0,
     "_fillType": 0,
-    "_sizeMode": 1,
+    "_sizeMode": 0,
     "_fillCenter": {
       "__type__": "cc.Vec2",
       "x": 0,
@@ -1996,8 +1992,8 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 100,
-      "height": 100
+      "width": 200,
+      "height": 200
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -2027,7 +2023,7 @@
       "a": 255
     },
     "_spriteFrame": {
-      "__uuid__": "57520716-48c8-4a19-8acf-41c9f8777fb0@f9941",
+      "__uuid__": "8f21f897-8cb9-448d-a674-e0574c83e228@7ca68",
       "__expectedType__": "cc.SpriteFrame"
     },
     "_type": 0,

assets/Scripts/Scenes/MainGame/AngleBtn.ts

-import { _decorator, Camera, Node, UITransform, v3, v2, misc, Component } from 'cc';
-
-const { ccclass, property } = _decorator;
-
-/**
- * 角度控制按钮组件
- */
-@ccclass('AngleBtn')
-export class AngleBtn extends Component {
-  /** UI相机 */
-  @property(Camera)
-  private uiCamera: Camera = null;
-
-  /** 角度按钮节点 */
-  @property(Node)
-  private AngleBtn: Node = null;
-
-  /** 圆点节点 */
-  @property(Node)
-  private CirDot: Node = null;
-
-  /** 最大半径 */
-  @property
-  private marR: number = 100;
-
-  /** UI变换组件 */
-  private cTransform: UITransform = null;
-
-  /** 方向向量 */
-  private dir: any = v2(0, 0);
-
-  /** 当前角度 */
-  public angle: number = 0;
-
-  onLoad() {
-
-    console.log(this.CirDot);
-    // 注册触摸事件
-    this.AngleBtn.on(Node.EventType.TOUCH_START, this.OnTouchStart, this);
-    this.AngleBtn.on(Node.EventType.TOUCH_END, this.OnTouchEnd, this);
-    this.AngleBtn.on(Node.EventType.TOUCH_MOVE, this.OnTouchMove, this);
-    this.AngleBtn.on(Node.EventType.TOUCH_CANCEL, this.OnTouchEnd, this);
-
-    // 获取UI变换组件
-    this.cTransform = this.AngleBtn.getComponent(UITransform);
-  }
-
-  /**
-   * 触摸开始回调
-   */
-  OnTouchStart(event: any) {
-    this.getCirPos(event.getLocation());
-  }
-
-  /**
-   * 触摸结束回调
-   */
-  OnTouchEnd(event: any) {
-    // 重置方向和圆点位置
-    this.dir.x = this.dir.y = 0;
-    this.CirDot.setPosition(0, 0);
-  }
-
-  /**
-   * 触摸移动回调
-   */
-  OnTouchMove(event: any) {
-    this.getCirPos(event.getLocation());
-  }
-
-  /**
-   * 计算圆点位置和角度
-   */
-  getCirPos(pos: any) {
-    // 屏幕坐标转世界坐标
-    const worldPos = this.uiCamera.screenToWorld(v3(pos.x, pos.y, 0));
-
-    // 转换到节点本地坐标
-    const nodePos = this.cTransform.convertToNodeSpaceAR(worldPos);
-    nodePos.z = 0;
-
-    // 计算长度并限制在最大半径内
-    let len = nodePos.length();
-    if (len > this.marR) {
-      nodePos.x = nodePos.x * this.marR / len;
-      nodePos.y = nodePos.y * this.marR / len;
-      len = this.marR;
-    }
-
-    // 更新方向向量
-    this.dir.x = nodePos.x / len;
-    this.dir.y = nodePos.y / len;
-
-    // 设置圆点位置
-    this.CirDot.setPosition(nodePos);
-
-    // 计算角度
-    this.angle = this.vectorsToDegree(this.dir);
-  }
-
-  /**
-   * 向量转角度
-   */
-  vectorsToDegree(vector: any): number {
-    const right = v2(1, 0);
-    const radian = vector.signAngle(right);
-    return misc.radiansToDegrees(radian);
-  }
-}
\ No newline at end of file

assets/Scripts/Scenes/MainGame/Joystick.ts

+import { _decorator, Node, UITransform, v3, v2, misc, Component, EventTouch, Vec2 } from "cc";
+
+const { ccclass, property } = _decorator;
+
+/**
+ * 角度控制按钮组件
+ */
+@ccclass("Joystick")
+export class Joystick extends Component {
+
+  @property(Node)
+  private handle: Node = null;
+
+  private maxRadius = 100;
+
+  /** 方向向量 */
+  private dir: Vec2 = v2(0, 0);
+
+  /** 当前角度 */
+  public angle: number = 0;
+
+  onLoad() {
+
+    this.maxRadius = this.getComponent(UITransform).contentSize.width / 2;
+
+    // 注册触摸事件
+    this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
+    this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
+    this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
+    this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
+  }
+
+  /**
+   * 触摸开始回调
+   */
+  onTouchStart(event: EventTouch) {
+    this.calcPos(event.getUILocation());
+  }
+
+  /**
+   * 触摸移动回调
+   */
+  onTouchMove(event: EventTouch) {
+    this.calcPos(event.getUILocation());
+  }
+
+  /**
+   * 触摸结束回调
+   */
+  onTouchEnd(event: EventTouch) {
+    // 重置方向和圆点位置
+    this.dir.x = this.dir.y = 0;
+    this.handle.setPosition(0, 0);
+  }
+
+  /**
+   * 计算圆点位置和角度
+   */
+  calcPos = (() => {
+    const worldPos = v3();
+    const nodePos = v3();
+
+    return (pos: Vec2) => {
+
+      worldPos.x = pos.x;
+      worldPos.y = pos.y;
+
+      // 转换到节点本地坐标
+      this.getComponent(UITransform).convertToNodeSpaceAR(worldPos, nodePos);
+      nodePos.z = 0;
+
+      // 计算长度并限制在最大半径内
+      const len = nodePos.length();
+      if (len > this.maxRadius) {
+        nodePos.multiplyScalar(this.maxRadius / len);
+      }
+
+      this.handle.setPosition(nodePos);
+
+      nodePos.normalize();
+
+      this.dir.set(nodePos.x, nodePos.y);
+
+      // 计算角度
+      this.angle = this.vectorsToDegree(this.dir);
+    };
+  })();
+
+  /**
+   * 向量转角度
+   */
+  vectorsToDegree(vector: Vec2): number {
+    const right = v2(1, 0);
+    const radian = vector.signAngle(right);
+    return misc.radiansToDegrees(radian);
+  }
+}
\ No newline at end of file

assets/Scripts/Scenes/MainGame/MainGame.ts

@@ -9,7 +9,7 @@ import {
   Prefab,
   PhysicsSystem2D,
 } from "cc";
-import { AngleBtn } from "./AngleBtn";
+import { Joystick } from "./Joystick";
 import { Snake } from "./Snake";
 import { FastBtn } from "./FastBtn";
 import { Animal } from "./Animal";
@@ -44,11 +44,7 @@ export class MainGame extends Scene {
   })
   private maxAnimal: number = 20;
 
-  @property({
-    type: AngleBtn,
-    displayName: "旋转按钮"
-  })
-  private angleBtn: AngleBtn = null;
+  @property({ type: Joystick, displayName: "摇杆" }) joystick: Joystick = null;
 
   @property({
     type: FastBtn,
@@ -137,7 +133,7 @@ export class MainGame extends Scene {
     this.LTips.string = `长度：${this.snake.getSnakeLen()}  金币：${this.snake.getmoneySum()}`;
 
     // 更新蛇的移动
-    this.snake.setAngle((360 - this.angleBtn.angle) % 360);
+    this.snake.setAngle((360 - this.joystick.angle) % 360);
     if (this.fashBtn.isFash) {
       this.snake.running(dt);
     } else {

assets/Scripts/Scenes/MainGame/Snake.ts

@@ -157,7 +157,7 @@ export class Snake extends Component {
           PoolManager.instance.putNode(otherCollider.node);
 
           if (foodType == FoodType.FOOD) {
-            this.setEnergy(1);
+            this.addEnergy(1);
           } else if (foodType == FoodType.MONEY) {
             this.moneySum += 1;
           }
@@ -171,8 +171,8 @@ export class Snake extends Component {
     }
   }
 
-  // 能量与成长系统
-  private setEnergy(value: number) {
+  // 能量与成长
+  private addEnergy(value: number) {
     this.energy += value;
     const growthThreshold = Math.floor(10 * this.scale);