蛇移动

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

+import { Element } from "@/pages/GamePage/Components/Element/Element.ts";
+import { Ele } from "@/pages/GamePage/config/Config.ts";
+import { collisionSys } from "@/pages/GamePage/GamePage.tsx";
+import { DEG_TO_RAD } from "pixi.js";
+
+/**
+ * 粽子
+ */
+export class ZongZi extends Element {
+
+  id: Ele = Ele.ZongZi;
+
+  initUI(): void {
+  }
+
+  initPhy(): void {
+    this.body = collisionSys.createCircle(
+      this.getGlobalPosition(),
+      this.sp.height / 2 / 2.2,
+      {
+        userData: {
+          ele: this
+        }
+      }
+    );
+    this.body.setAngle(this.angle * DEG_TO_RAD);
+  }
+
+  updatePhy(): void {
+  }
+}

src/pages/GamePage/GamePage.less

@@ -56,6 +56,49 @@
     width: 277px;
     height: 79px;
     .webpBg("GamePage/我的分数.png");
+
+    .scoreNum {
+      position: absolute;
+      left: 125px;
+      top: -2px;
+      width: 120px;
+      height: 100%;
+      font-size: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+  }
+
+  .cd {
+    position: absolute;
+    right: 0;
+    top: 211px;
+    width: 179px;
+    height: 79px;
+    .webpBg("GamePage/cdBg.png");
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .cdNum {
+      position: absolute;
+      top: -2px;
+      height: 100%;
+      font-size: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
   }
 
   .backBtn {

src/pages/GamePage/GamePage.tsx

@@ -15,6 +15,7 @@ import { winSize } from "@/pages/GamePage/config/Config.ts";
 import { Stats } from 'pixi-stats';
 
 import { System } from 'detect-collisions';
+import gameStore from "@/store/gameStore.ts";
 
 export const collisionSys: System = new System();
 const DEBUG = true;
@@ -121,6 +122,9 @@ class GamePage extends React.Component {
   }
 
   render() {
+
+    const { score } = gameStore.gameInfo;
+
     return <div className="GamePage">
       <div className="gameBg"/>
       <canvas
@@ -134,7 +138,10 @@ class GamePage extends React.Component {
         />
       }
       <div className="scoreArea">
-
+        <div className="scoreNum">{score}</div>
+      </div>
+      <div className="cd">
+        <div className="cdNum">1:20</div>
       </div>
       <MusicBtn className="musicBtn"/>
       <Button className="backBtn" onClick={this.clickBack}/>

src/pages/GamePage/config/Config.ts

@@ -4,6 +4,7 @@ import { Filiform } from "@/pages/GamePage/Components/Element/Filiform.ts";
 import { Molecule } from "@/pages/GamePage/Components/Element/Molecule.ts";
 import { Mugwort } from "@/pages/GamePage/Components/Element/Mugwort.ts";
 import { Realgar } from "@/pages/GamePage/Components/Element/Realgar.ts";
+import { ZongZi } from "@/pages/GamePage/Components/Element/ZongZi.ts";
 
 export enum Ele {
   Yeast = "Yeast",  // 酵母菌
@@ -11,6 +12,7 @@ export enum Ele {
   Molecule = "Molecule",  // 黄色分子
   Mugwort = "Mugwort", // 艾草
   Realgar = "Realgar", // 雄黄
+  ZongZi = "ZongZi", // 雄黄
 }
 
 export interface EleData {
@@ -47,6 +49,11 @@ export const EleConfig: { [key in Ele]: EleData } = {
     texture: "元素/雄黄.png",
     weight: 1,
     neg: true,
+  },
+  [Ele.ZongZi]: {
+    cls: ZongZi,
+    texture: "元素/粽子.png",
+    weight: 100,
   }
 }
 

src/store/gameStore.ts

@@ -36,6 +36,14 @@ class GameStore {
     return success;
   }
 
+  gameInfo: {
+    score: number,
+    remainTimes: number,
+  } = {
+    score: 0,
+    remainTimes: 0,
+  }
+
   async submit(win: boolean, soc: number) {
 
     const startId = this.startInfo.userRecordId;