倒计时

src/pages/GamePage/Components/Snake.ts

@@ -4,7 +4,7 @@ import { GameConfig, mapSize } from "@/pages/GamePage/config/Config.ts";
 import { Circle } from "detect-collisions";
 import { collisionSys } from "@/pages/GamePage/GamePage.tsx";
 import { Tween } from "@/pages/GamePage/tween";
-import { reaction } from "mobx";
+import { IReactionDisposer, reaction } from "mobx";
 import gameStore from "@/store/gameStore.ts";
 
 export class Snake extends Container {
@@ -25,10 +25,12 @@ export class Snake extends Container {
   collider: Circle = null;
   negCollider: Circle = null;
 
+  levelDisposer: IReactionDisposer = null;
+
   init() {
     this.initUI();
     this.initPhy();
-    reaction(
+    this.levelDisposer = reaction(
       () => gameStore.gameInfo.level,
       (level) => {
         const { levelCfg } = GameConfig;
@@ -39,6 +41,11 @@ export class Snake extends Container {
     );
   }
 
+  destroy() {
+    this.levelDisposer();
+    super.destroy();
+  }
+
   setSkin(skin: string) {
     this.bodyScale = 1;
     this.head.texture = Assets.get(`蛇/${skin}/head.png`);

src/pages/GamePage/GamePage.tsx

@@ -16,6 +16,7 @@ import { Stats } from 'pixi-stats';
 
 import { System } from 'detect-collisions';
 import gameStore from "@/store/gameStore.ts";
+import { prefixInteger, second2Date } from "@/utils/utils.ts";
 
 export const collisionSys: System = new System();
 const DEBUG = true ;
@@ -41,8 +42,11 @@ class GamePage extends React.Component {
 
   app: Application = null;
   game: Game = null;
+  interval: any = 0;
 
   async componentDidMount() {
+    gameStore.reset();
+
     await initBundle();
 
     this.initEvent();
@@ -54,6 +58,18 @@ class GamePage extends React.Component {
     }
 
     await this.initStage();
+
+    this.startCd();
+  }
+
+  startCd = () => {
+    this.interval = setInterval(() => {
+      gameStore.gameInfo.cd -= 1;
+      if (gameStore.gameInfo.cd <= 0) {
+        clearInterval(this.interval);
+        gameStore.gameInfo.cd = 0;
+      }
+    }, 1000);
   }
 
   initEvent() {
@@ -127,7 +143,10 @@ class GamePage extends React.Component {
 
   render() {
 
-    const { score } = gameStore.gameInfo;
+    const { score, cd } = gameStore.gameInfo;
+
+    const min = prefixInteger(Math.floor(cd / 60), 2);
+    const sec = prefixInteger(cd % 60, 2);
 
     return <div className="GamePage">
       <div className="gameBg"/>
@@ -145,7 +164,7 @@ class GamePage extends React.Component {
         <div className="scoreNum">{score}</div>
       </div>
       <div className="cd">
-        <div className="cdNum">1:20</div>
+        <div className="cdNum">{min}:{sec}</div>
       </div>
       <MusicBtn className="musicBtn"/>
       <Button className="backBtn" onClick={this.clickBack}/>

src/pages/GamePage/config/Config.ts

@@ -24,6 +24,7 @@ export interface EleData {
 }
 
 export const GameConfig = {
+  gameCd: 120,
   magnetTime: 10000,
   magnetScale: 4,
   initEnergy: 10,

src/store/gameStore.ts

@@ -42,11 +42,23 @@ class GameStore {
     remainTimes: number,
     level: number,
     maxScore: number,
+    cd: number,
   } = {
     score: 0,
     remainTimes: 0,
     level: 0,
     maxScore: 0,
+    cd: GameConfig.gameCd,
+  }
+
+  reset() {
+    this.gameInfo = {
+      score: 0,
+      remainTimes: 0,
+      level: 0,
+      maxScore: 0,
+      cd: GameConfig.gameCd,
+    }
   }
 
   addScore(s: number) {

src/utils/utils.ts

@@ -413,3 +413,8 @@ export const getCustomShareId = () => {
   console.log('自定义活动页id', shareId);
   return shareId;
 };
+
+
+export function prefixInteger(num: number, length: number) {
+  return (Array(length).join('0') + num).slice(-length);
+}