倒计时

src/App.tsx

@@ -27,7 +27,7 @@ class App extends Component {
     const defaultPage = {
       myPrize: MyPrize, // TODO 举例子 新宿台奖品页
       index: HomePage,
-    }[skinId] || GamePage;
+    }[skinId] || HomePage;
     PageCtrl.changePage(defaultPage);
   }
 

src/pages/GamePage/Components/Snake.ts

-import { Assets, Container, Point, PointData, Sprite } from "pixi.js";
+import { Assets, Container, Point, PointData, Sprite, RAD_TO_DEG } from "pixi.js";
 import { GameConfig, mapSize } from "@/pages/GamePage/config/Config.ts";
 
 import { Circle } from "detect-collisions";
@@ -183,7 +183,7 @@ export class Snake extends Container {
 
     const bodyLen = this.bodyArr.length;
 
-    const headAngle = this.head.angle = Math.atan2(this.dir.y, this.dir.x) * 180 / Math.PI;
+    const headAngle = this.head.angle = Math.atan2(this.dir.y, this.dir.x) * RAD_TO_DEG;
 
     // 更新头部位置
     const newHeadPos = this.dir

src/pages/GamePage/GamePage.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import './GamePage.less';
 import { Button } from "@grace/ui";
 
-import { Application, Assets, Ticker } from "pixi.js";
+import { Application, Assets, Texture, TextureGCSystem, TexturePool, Ticker } from "pixi.js";
 import { Tween } from "./tween";
 
 import { initBundle } from "@/pages/GamePage/Helper.ts";
@@ -23,6 +23,9 @@ import BackPanel from "@/panels/BackPanel/BackPanel.tsx";
 export const collisionSys: System = new System();
 const DEBUG = true ;
 
+
+let gameCanvas: HTMLCanvasElement = null;
+
 export function getApp(): Application {
   return window["__app"];
 }
@@ -39,7 +42,7 @@ class GamePage extends React.Component {
   state: IGamePageState = {
   }
 
-  gameCanvas: HTMLCanvasElement = null;
+  gameDiv: HTMLDivElement = null;
 
   debugCanvas: HTMLCanvasElement = null;
   debugCtx: CanvasRenderingContext2D = null;
@@ -87,43 +90,55 @@ class GamePage extends React.Component {
   }
 
   componentWillUnmount() {
-    this.app?.destroy();
-    window["__app"] = null;
+    this.gameDiv.removeChild(gameCanvas);
+
     collisionSys.clear();
     Tween.removeAllTweens();
+
+    this.app.ticker.remove(this.onUpdate);
+    this.game.removeFromParent();
+    this.game.destroy();
   }
 
   async initStage() {
-    const app = this.app = new Application();
-
-    await app.init({
-      canvas: this.gameCanvas,
-      backgroundColor: 0xffffff,
-      width: winSize.width,
-      height: winSize.height,
-      powerPreference: "high-performance",
-      // resolution: Math.min(window.devicePixelRatio, 2) || 1,
-      resolution: 1,
-      preference: "webgl",
-      webgl: {
-        // preserveDrawingBuffer: true,
-        // antialias: true,
-      },
-      eventMode: "static",
-    });
 
-    window["__app"]?.destroy();
-    window["__app"] = app;
+    if (!gameCanvas) {
+      gameCanvas = document.createElement("canvas");
+      gameCanvas.className = "gameCanvas";
+    }
+
+    this.gameDiv.appendChild(gameCanvas);
+
+    if (!window["__app"]) {
+      const app = window["__app"] = new Application();
+      await app.init({
+        canvas: gameCanvas,
+        backgroundColor: 0xffffff,
+        width: winSize.width,
+        height: winSize.height,
+        powerPreference: "high-performance",
+        // resolution: Math.min(window.devicePixelRatio, 2) || 1,
+        resolution: 1,
+        preference: "webgl",
+        webgl: {
+          // preserveDrawingBuffer: true,
+          // antialias: true,
+        },
+        eventMode: "static",
+      });
+
+      app.renderer.accessibility.destroy();
+    }
+
+    const app = this.app = window["__app"];
 
     if (DEBUG) {
       const stats = new Stats(app.renderer);
     }
 
-    app.renderer.accessibility.destroy();
-
     await Assets.loadBundle("Game");
 
-    app.ticker.add(this.onUpdate);
+    this.app.ticker.add(this.onUpdate);
 
     this.game = app.stage.addChild(new Game());
 
@@ -174,10 +189,12 @@ class GamePage extends React.Component {
 
     return <div className="GamePage">
       <div className="gameBg"/>
-      <canvas
-        className="gameCanvas"
-        ref={(el) => this.gameCanvas = el}
-      />
+      <div className="gameDiv" ref={(el) => this.gameDiv = el}>
+        {/*<canvas*/}
+        {/*  className="gameCanvas"*/}
+        {/*  ref={(el) => this.gameCanvas = el}*/}
+        {/*/>*/}
+      </div>
       {
         DEBUG && <canvas
           className="gameCanvas debugCanvas"

src/panels/BackPanel/BackPanel.tsx

@@ -4,6 +4,8 @@ import "./BackPanel.less";
 import { Button } from "@grace/ui";
 import { _asyncThrottle } from "@/utils/utils.ts";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+import HomePage from "@/pages/HomePage/HomePage.tsx";
 
 export interface IFailPanelProps {
   ok: () => void,
@@ -26,7 +28,7 @@ class BackPanel extends React.Component<IFailPanelProps> {
     const { ok } = this.props;
     ModalCtrl.closeModal();
     ok && ok();
-    // PageCtrl.changePage(HomePage);
+    PageCtrl.changePage(HomePage);
   });
 
   render() {