蛇移动

src/pages/GamePage/Components/Element/Element.ts

-import { Assets, Container, Sprite } from "pixi.js";
+import { Assets, Container, DestroyOptions, PointData, Sprite } from "pixi.js";
 import { Ele, EleConfig } from "@/pages/GamePage/config/Config.ts";
-
+import { Body } from "detect-collisions";
+import { BodyProps } from "detect-collisions/dist/model";
+import { collisionSys } from "@/pages/GamePage/GamePage.tsx";
+import { Tween } from "@/pages/GamePage/tween";
 
 export abstract class Element extends Container {
 
   id: Ele = null;
   sp: Sprite = null;
 
-  body: any = null;
+  body: Body = null;
+
+  canEat: boolean = true;
 
   abstract initUI(): void;
   abstract initPhy(): void;
@@ -24,4 +29,44 @@ export abstract class Element extends Container {
     this.initPhy();
   }
 
+  onDestroy(): void {
+
+  }
+
+
+  get scaleX() {
+    return this.sp.scale.x;
+  }
+
+  set scaleX(value: number) {
+    this.sp.scale.x = value;
+  }
+
+  get scaleY() {
+    return this.sp.scale.y;
+  }
+
+  set scaleY(value: number) {
+    this.sp.scale.y = value;
+  }
+
+
+  beEaten(pos: PointData) {
+    if (!this.canEat) return;
+    this.canEat = false;
+
+    collisionSys.remove(this.body);
+    this.body = null;
+
+    Tween.get(this)
+      .to({
+        x: pos.x, y: pos.y,
+        scaleX: 0.1, scaleY: 0.1,
+      }, 444)
+      .call(() => {
+        this.onDestroy();
+        this.removeFromParent();
+      });
+  }
+
 }

src/pages/GamePage/Components/Element/Filiform.ts

@@ -20,7 +20,12 @@ export class Filiform extends Element {
     this.body = collisionSys.createBox(
       this.getGlobalPosition(),
       width,
-      height
+      height,
+      {
+        userData: {
+          ele: this
+        }
+      }
     );
     this.body.setOffset(new SATVector(-width / 2, -height / 2));
     this.body.setAngle(this.angle * DEG_TO_RAD);

src/pages/GamePage/Components/Element/Molecule.ts

@@ -20,7 +20,12 @@ export class Molecule extends Element {
     this.body = collisionSys.createBox(
       this.getGlobalPosition(),
       width,
-      height
+      height,
+      {
+        userData: {
+          ele: this
+        }
+      }
     );
     this.body.setOffset(new SATVector(-width / 2, -height / 2));
     this.body.setAngle(this.angle * DEG_TO_RAD);

src/pages/GamePage/Components/Element/Mugwort.ts

@@ -19,7 +19,12 @@ export class Mugwort extends Element {
     this.body = collisionSys.createBox(
       this.getGlobalPosition(),
       width / 2.1,
-      height / 2.1
+      height / 2.1,
+      {
+        userData: {
+          ele: this
+        }
+      }
     );
     this.body.setOffset(new SATVector(-width / 2.1 / 2, -height / 2.1 / 2));
     this.body.setAngle(this.angle * DEG_TO_RAD);

src/pages/GamePage/Components/Element/Realgar.ts

@@ -19,7 +19,12 @@ export class Realgar extends Element {
     this.body = collisionSys.createBox(
       this.getGlobalPosition(),
       width / 2.1,
-      height / 2.6
+      height / 2.6,
+      {
+        userData: {
+          ele: this
+        }
+      }
     );
     this.body.setOffset(new SATVector(-width / 2.1 / 2, -height / 2.6 / 2));
     this.body.setAngle(this.angle * DEG_TO_RAD);

src/pages/GamePage/Components/Element/Yeast.ts

@@ -16,7 +16,12 @@ export class Yeast extends Element {
   initPhy(): void {
     this.body = collisionSys.createCircle(
       this.getGlobalPosition(),
-      this.sp.height / 2
+      this.sp.height / 2,
+      {
+        userData: {
+          ele: this
+        }
+      }
     );
     this.body.setAngle(this.angle * DEG_TO_RAD);
   }

src/pages/GamePage/Components/ElementMgr.ts

@@ -50,8 +50,8 @@ export class ElementMgr {
     if (this.footCtn.children.length > 6) return;
     const eleData = foodWeight.get();
     const ele = new eleData.cls();
-    ele.x = Math.random() * mapSize.width - 100 + 50;
-    ele.y = Math.random() * mapSize.height - 100 + 50;
+    ele.x = Math.random() * mapSize.width - 140 + 70;
+    ele.y = Math.random() * mapSize.height - 140 + 70;
     this.footCtn.addChild(ele);
     ele.init();
   }
@@ -60,8 +60,8 @@ export class ElementMgr {
     if (this.negCtn.children.length > 4) return;
     const eleData = negWeight.get();
     const ele = new eleData.cls();
-    ele.x = Math.random() * mapSize.width - 100 + 50;
-    ele.y = Math.random() * mapSize.height - 100 + 50;
+    ele.x = Math.random() * mapSize.width - 140 + 70;
+    ele.y = Math.random() * mapSize.height - 140 + 70;
     this.negCtn.addChild(ele);
     ele.init();
   }

src/pages/GamePage/Game.ts

@@ -5,6 +5,10 @@ import 'pixi.js/math-extras';
 import { Snake } from "@/pages/GamePage/Components/Snake.ts";
 import { ElementMgr } from "@/pages/GamePage/Components/ElementMgr.ts";
 import { mapTop } from "@/pages/GamePage/config/Config.ts";
+import { collisionSys } from "@/pages/GamePage/GamePage.tsx";
+import {Element} from "./Components/Element/Element.ts";
+
+import { Response, Body } from "detect-collisions";
 
 export class Game extends Container {
 
@@ -59,10 +63,22 @@ export class Game extends Container {
     this.joystick.visible = false;
   }
 
+  colliderCallback = (result: Response) => {
+    const {
+      a, b,
+      aInB, bInA,
+      overlap, overlapV, overlapN
+    } = result;
+
+    const { userData: { ele } } = b as Body<{ele: Element}>;
+    ele.beEaten(this.snake.head);
+  }
+
   onUpdate(time: Ticker) {
     const dt = time.deltaMS / 1000;
     this.snake.dir.copyFrom(this.joystick.dir);
     this.snake.onUpdate(dt);
+    collisionSys.checkOne(this.snake.collider, this.colliderCallback);
   }
 
   destroy() {

src/pages/GamePage/GamePage.tsx

@@ -58,6 +58,7 @@ class GamePage extends React.Component {
   componentWillUnmount() {
     this.app?.destroy();
     window["__app"] = null;
+    collisionSys.clear();
   }
 
   async initStage() {

src/pages/GamePage/config/Config.ts

@@ -55,7 +55,7 @@ export const winSize = {
   height: window.innerHeight / window.innerWidth * 750,
 }
 
-export const mapTop = 290;
+export const mapTop = 464;
 
 export const mapSize = {
   width: winSize.width,