11

mock/game.ts

@@ -10,10 +10,10 @@ export default [
         message: "message",
         data: AESEncrypt(JSON.stringify({
           recordId: "recordId",
-          countdownSeconds: 180,
+          countdownSeconds: 10,
           remainTipTimes: 3,
         }), "7A2F4B8D1E6C3905", "cDOiBC1n2QrkAY2P"),
-        data: "TtL6pvFMpXEajymGe7uOoiD0iaAnxxtuOFqvG+Vo0R4qzJQlb+eQneEkPKv+nNsXKJHVe/hfKTQAMj6FuC2Ltg=="
+        // data: "TtL6pvFMpXEajymGe7uOoiD0iaAnxxtuOFqvG+Vo0R4qzJQlb+eQneEkPKv+nNsXKJHVe/hfKTQAMj6FuC2Ltg=="
       }
     },
   },

src/pages/GamePage/Components/LevelBase.ts

@@ -6,6 +6,13 @@ export abstract class LevelBase extends Base {
   abstract level: number;
   qs: Sprite;
 
+  setPauseCd: (pause: boolean) => void;
+
+  constructor(setPauseCd) {
+    super();
+    this.setPauseCd = setPauseCd;
+  }
+
   onLoad() {
     this.qs = this.addChild(new Sprite(Assets.get(`level${this.level}/qs.png`)));
     this.qs.anchor.set(0.5);

src/pages/GamePage/Game.ts

@@ -37,6 +37,13 @@ export class Game extends Base {
 
   level: LevelBase = null;
 
+  pauseCd: boolean = false;
+
+  setPauseCd = (pause: boolean) => {
+    this.pauseCd = pause;
+  };
+
+
   onLoad() {
     const qsBg = this.addChild(new Sprite(Assets.get("问题.png")));
     qsBg.position.set(49, 316);
@@ -45,22 +52,45 @@ export class Game extends Base {
     globalEvent.on(GameEvent.NextLevel, this.nextLevel, this);
 
     this.nextLevel();
+    this.startCd();
+  }
+
 
+  gameOver() {
+    this.eventMode = "none";
+    this.interactive = this.interactiveChildren = false;
   }
 
-  nextLevel() {
+  intervalId: number = null;
 
+  startCd() {
+    this.intervalId = window.setInterval(() => {
+      if (this.pauseCd) return;
+      const newCd = gameStore.gameInfo.cd -= 1;
+      if (newCd <= 0) {
+        clearInterval(this.intervalId);
+        this.gameOver();
+        return;
+      }
+    }, 1000);
+  }
+
+  nextLevel() {
     gameStore.gameInfo.levelIndex++;
 
     const { levelIndex, levelIdxArr } = gameStore.gameInfo;
 
     if (levelIndex > 0) {
       if (levelIndex >= LevelArr.length) {
+        clearInterval(this.intervalId);
         gameStore.submit(LevelArr.length);
         return;
       } else {
+        gameStore.gameInfo.cd = gameStore.gameInfo.countdownSeconds;
         gameStore.middleSubmit(levelIndex);
       }
+    } else {
+      gameStore.gameInfo.cd = gameStore.gameInfo.countdownSeconds;
     }
 
     if (levelIndex >= levelIdxArr.length) {
@@ -76,7 +106,7 @@ export class Game extends Base {
 
     const { cls } = LevelArr[levelIdx];
 
-    this.level = this.addChild(new cls());
+    this.level = this.addChild(new cls(this.setPauseCd));
     // this.level = this.addChild(new Level25());
   }
 
@@ -89,5 +119,7 @@ export class Game extends Base {
   }
 
   onDestroy() {
+    super.onDestroy();
+    clearInterval(this.intervalId);
   }
 }

src/pages/GamePage/GamePage.tsx

@@ -22,6 +22,7 @@ import TipPanel from "@/panels/TipPanel/TipPanel.tsx";
 import { LevelArr } from "@/pages/GamePage/Level/LevelConfig.ts";
 import ExitPop from '@/components/exitPop/exitPop';
 import { _throttle } from "@/utils/utils.ts";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
 
 export function getApp(): Application {
   return window["__app"];
@@ -93,7 +94,6 @@ class GamePage extends React.Component<any, any> {
     this.app.ticker.add(this.onUpdate);
 
     this.game = app.stage.addChild(new Game());
-
   }
 
   onUpdate = (time: Ticker) => {
@@ -124,8 +124,7 @@ class GamePage extends React.Component<any, any> {
   })
 
   render() {
-    const {} = store.indexData;
-    const { levelIndex, levelIdxArr } = gameStore.gameInfo;
+    const { levelIndex, levelIdxArr, cd } = gameStore.gameInfo;
 
     const titleSrc = new URL(
       `../../assets/GamePage/title/title${(levelIndex + 1) || 1}.png?x-oss-process=image/format,webp`,
@@ -136,7 +135,7 @@ class GamePage extends React.Component<any, any> {
 
       <canvas className={styles.gameCanvas} ref={(el) => this.gameCanvas = el}/>
 
-      <div className={styles.cd}>180s</div>
+      <div className={styles.cd}>{cd}s</div>
       <img src={titleSrc} className={styles.title}/>
       <Button className={`${styles.tipBtn} md14`} onClick={this.clickTip}/>
       <Button className={`${styles.backBtn} md13`} onClick={this.clickBack}/>

src/pages/GamePage/Level/Level1.ts

@@ -52,6 +52,7 @@ export class Level1 extends LevelBase {
     const wait = 2000;
 
     if (isRight) {
+      this.setPauseCd(true);
       this.right.visible = true;
       this.right.position.set(item.x + dp, item.y + dp);
       Tween.get(this.error)

src/pages/GamePage/Level/Level10.ts

@@ -67,6 +67,7 @@ export class Level10 extends LevelBase {
       && ny >= 865
       && ny <= 940
     ) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       Tween.get(this.B).to({ alpha: 0 }, 444, Ease.quadInOut);
       Tween.get(this.D).to({ alpha: 0 }, 444, Ease.quadInOut);

src/pages/GamePage/Level/Level11.ts

@@ -117,6 +117,7 @@ export class Level11 extends LevelBase {
     // 防止重复触发
     if (this.right.alpha > 0) return;
 
+    this.setPauseCd(true);
     this.setTouchEnable(false);
 
     Tween.get(this.right)

src/pages/GamePage/Level/Level12.ts

@@ -204,6 +204,7 @@ export class Level12 extends LevelBase {
     // 设置right的位置
     this.right.position.set(rightX, rightY);
 
+    this.setPauseCd(true);
     // 显示right图标并完成通关
     Tween.get(this.right)
       .to({ alpha: 1 }, 444, Ease.quadInOut)

src/pages/GamePage/Level/Level13.ts

@@ -73,6 +73,7 @@ export class Level13 extends LevelBase {
       cx < 10 || cx > 410
       || cy < 480 || cy > 900
     ) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       Tween.get(this.right)
         .to({ alpha: 1 }, 444, Ease.quadInOut)

src/pages/GamePage/Level/Level14.ts

@@ -95,6 +95,7 @@ export class Level14 extends LevelBase {
       && ny >= 930
       && ny <= 1120
     ) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       Tween.get(this.A)
         .to({ x: 484, y: 1040 }, 444, Ease.quadInOut)

src/pages/GamePage/Level/Level15.ts

@@ -117,6 +117,7 @@ export class Level15 extends LevelBase {
       .intersects(new Rectangle(180, 840, 37, 55));
 
     if (isIns) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       this.target.eventMode = "none";
       this.target.interactive = false;

src/pages/GamePage/Level/Level16.ts

@@ -62,6 +62,7 @@ export class Level16 extends LevelBase {
       && ny >= 920
       && ny <= 1034
     ) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       // Tween.get(this.B).to({ alpha: 0 }, 444, Ease.quadInOut);
       Tween.get(this.A)

src/pages/GamePage/Level/Level17.ts

@@ -66,7 +66,10 @@ export class Level17 extends LevelBase {
           !item.findFlag && this.findNum++;
           item.alpha = 1;
           item.findFlag = true;
-          if(this.findNum == 10) globalEvent.emit(GameEvent.NextLevel);
+          if(this.findNum == 10) {
+            this.setPauseCd(true);
+            globalEvent.emit(GameEvent.NextLevel);
+          }
         })
       }
     })

src/pages/GamePage/Level/Level18.ts

@@ -82,6 +82,7 @@ export class Level18 extends LevelBase {
       (c1x < -125 || c1x > 350 || c1y < 595 || c1y > 820)
       && (c2x < -125 || c2x > 350 || c2y < 595 || c2y > 820)
     ) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       Tween.get(this.ice).to({ alpha: 0 }, 666, Ease.quadInOut);
       Tween.get(this.ice2).wait(444).to({ alpha: 1 }, 666, Ease.quadInOut);

src/pages/GamePage/Level/Level19.ts

@@ -117,6 +117,7 @@ export class Level19 extends LevelBase {
     // 防止重复触发
     if (this.right.alpha > 0) return;
 
+    this.setPauseCd(true);
     this.setTouchEnable(false);
 
     Tween.get(this.right)

src/pages/GamePage/Level/Level2.ts

@@ -55,6 +55,7 @@ export class Level2 extends LevelBase {
     const wait = 2000;
 
     if (isRight) {
+      this.setPauseCd(true);
       this.right.visible = true;
       this.right.position.set(item.x + dp, item.y + dp);
       Tween.get(this.error)

src/pages/GamePage/Level/Level20.ts

@@ -107,6 +107,7 @@ export class Level20 extends LevelBase {
         && !this.C.interactive
         && !this.qs.interactive
       ) {
+        this.setPauseCd(true);
         Tween.get(this.right)
           .to({ alpha: 1 }, 666, Ease.quadInOut)
           .wait(2000)

src/pages/GamePage/Level/Level21.ts

@@ -71,6 +71,7 @@ export class Level21 extends LevelBase {
       .intersects(new Rectangle(bx + edge, by + edge, bw - edge * 2, bh - edge * 2));
 
     if (isIns) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       this.right.position.set(bx - 30, by - 30);
       Tween.get(this.B).to({ alpha: 0 }, 666, Ease.quadInOut);

src/pages/GamePage/Level/Level22.ts

@@ -78,6 +78,7 @@ export class Level22 extends LevelBase {
       (ax < 0 || ax > 425 || ay < 600 || ay > 970)
       && (bx < 80 || bx > 450 || by < 840 || by > 1200)
     ) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       Tween.get(this.right)
         .to({ alpha: 1 }, 666, Ease.quadInOut)

src/pages/GamePage/Level/Level23.ts

@@ -48,6 +48,7 @@ export class Level23 extends LevelBase {
     const wait = 2000;
 
     if (isRight) {
+      this.setPauseCd(true);
       this.right.visible = true;
       this.right.position.set(item.x + dp, item.y + dp);
       Tween.get(this.error)

src/pages/GamePage/Level/Level24.ts

@@ -186,6 +186,7 @@ export class Level24 extends LevelBase {
     if (this.right.alpha > 0) return;
 
     console.log("开始通关动画");
+    this.setPauseCd(true);
     this.setTouchEnable(false);
 
     // 获取最后一个球

src/pages/GamePage/Level/Level25.ts

@@ -80,6 +80,7 @@ export class Level25 extends LevelBase {
       this.redFace.alpha = 0;
       this.wake.alpha = 1;
       this.hideMark.alpha = 0;
+      this.setPauseCd(true);
       Tween.get(this.right)
       .to({ alpha: 1 }, 444, Ease.quadInOut)
       .wait(2000)

src/pages/GamePage/Level/Level3.ts

@@ -52,6 +52,7 @@ export class Level3 extends LevelBase {
     const wait = 2000;
 
     if (isRight) {
+      this.setPauseCd(true);
       this.right.visible = true;
       this.right.position.set(item.x + dp, item.y + dp);
       Tween.get(this.error)

src/pages/GamePage/Level/Level4.ts

@@ -53,6 +53,7 @@ export class Level4 extends LevelBase {
     const wait = 2000;
 
     if (isRight) {
+      this.setPauseCd(true);
       this.right.visible = true;
       Tween.get(this.error)
         .wait(wait)

src/pages/GamePage/Level/Level5.ts

@@ -99,6 +99,7 @@ export class Level5 extends LevelBase {
       && ny >= 1000
       && ny <= 1120
     ) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       Tween.get(this.A)
         .to({ x: 439, y: 1073 }, 444, Ease.quadInOut)

src/pages/GamePage/Level/Level6.ts

@@ -74,6 +74,7 @@ export class Level6 extends LevelBase {
 
     const { x, y } = this.C;
     if (x >= 80 && x <= 230 && y >= 1030 && y <= 1100) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       Tween.get(this.C)
         .to({ x: 129, y: 1049 }, 666, Ease.quadInOut);

src/pages/GamePage/Level/Level7.ts

@@ -33,6 +33,7 @@ export class Level7 extends LevelBase {
   }
 
   passLevel() {
+    this.setPauseCd(true);
     this.setTouchEnable(false);
     getApp().stage.off("pointerdown", this.onPointerDown, this);
     getApp().stage.off("pointerup", this.onPointerUp, this);

src/pages/GamePage/Level/Level8.ts

@@ -53,6 +53,7 @@ export class Level8 extends LevelBase {
     const wait = 2000;
 
     if (isRight) {
+      this.setPauseCd(true);
       this.right.visible = true;
       Tween.get(this.error)
         .wait(wait)

src/pages/GamePage/Level/Level9.ts

@@ -59,6 +59,7 @@ export class Level9 extends LevelBase {
       && ny >= 980
       && ny <= 1100
     ) {
+      this.setPauseCd(true);
       this.setTouchEnable(false);
       Tween.get(this.A)
         .to({ x: 380, y: 975 }, 444, Ease.quadInOut)

src/store/gameStore.ts

@@ -20,6 +20,7 @@ class GameStore {
     levelIdxArr: [],
     countdownSeconds: 180,
     remainTipTimes: 0,
+    cd: 180,
   }
 
   async start() {