倒计时

src/pages/GamePage/GamePage.tsx

@@ -17,6 +17,8 @@ import { Stats } from 'pixi-stats';
 import { System } from 'detect-collisions';
 import gameStore from "@/store/gameStore.ts";
 import { prefixInteger } from "@/utils/utils.ts";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+import BackPanel from "@/panels/BackPanel/BackPanel.tsx";
 
 export const collisionSys: System = new System();
 const DEBUG = true ;
@@ -46,6 +48,8 @@ class GamePage extends React.Component {
   game: Game = null;
   interval: any = 0;
 
+  paused: boolean = false;
+
   async componentDidMount() {
     gameStore.reset();
 
@@ -67,6 +71,8 @@ class GamePage extends React.Component {
 
   startCd = () => {
     this.interval = setInterval(() => {
+      if (this.paused) return;
+
       gameStore.gameInfo.cd -= 1;
       if (gameStore.gameInfo.cd <= 0) {
         clearInterval(this.interval);
@@ -125,6 +131,7 @@ class GamePage extends React.Component {
 
   onUpdate = (time: Ticker) => {
     if (this.gameOver) return;
+    if (this.paused) return;
 
     Tween.flush();
     this.game.onUpdate(time);
@@ -145,7 +152,17 @@ class GamePage extends React.Component {
    * 点击返回
    */
   clickBack = () => {
-    PageCtrl.backPage();
+    this.gameOver = true;
+    ModalCtrl.showModal(BackPanel, {
+      cancel: () => {
+        this.gameOver = false;
+      },
+      ok: () => {
+        this.gameOver = false;
+        clearInterval(this.interval);
+        PageCtrl.backPage();
+      },
+    });
   }
 
   render() {

src/panels/BackPanel/BackPanel.less

+@import "../../res.less";
+
+.BackPanel {
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  .bg {
+    position: absolute;
+    left: 105px;
+    top: 448px;
+    width: 539px;
+    height: 533px;
+    .webpBg("BackPanel/bg.png");
+  }
+
+  .ok {
+    position: absolute;
+    left: 413px;
+    top: 847px;
+    width: 199px;
+    height: 90px;
+    .webpBg("BackPanel/确认.png");
+  }
+
+  .cancel {
+    position: absolute;
+    left: 140px;
+    top: 855px;
+    width: 242px;
+    height: 74px;
+    .webpBg("BackPanel/继续游戏.png");
+  }
+
+}

src/panels/BackPanel/BackPanel.tsx

+import React from "react";
+import { observer } from "mobx-react";
+import "./BackPanel.less";
+import { Button } from "@grace/ui";
+import { _asyncThrottle } from "@/utils/utils.ts";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+
+export interface IFailPanelProps {
+  ok: () => void,
+  cancel: () => void,
+}
+
+@observer
+class BackPanel extends React.Component<IFailPanelProps> {
+
+  componentDidMount() {
+  }
+
+  clickCancel = () => {
+    const { cancel } = this.props;
+    ModalCtrl.closeModal();
+    cancel && cancel();
+  };
+
+  clickOk = _asyncThrottle(async () => {
+    const { ok } = this.props;
+    ModalCtrl.closeModal();
+    ok && ok();
+    // PageCtrl.changePage(HomePage);
+  });
+
+  render() {
+    return <div className="BackPanel">
+      <div className="bg"/>
+      <Button className="ok" onClick={this.clickOk}/>
+      <Button className="cancel" onClick={this.clickCancel}/>
+    </div>;
+  }
+}
+
+export default BackPanel;