磁铁动画

src/pages/GamePage/Components/Snake.ts

@@ -43,6 +43,7 @@ export class Snake extends Container {
 
   destroy() {
     this.levelDisposer();
+    Tween.removeTweens(this.magnetSp);
     super.destroy();
   }
 
@@ -74,6 +75,12 @@ export class Snake extends Container {
     // 创建身体节点
     this.addEnergy(GameConfig.initEnergy);
 
+    this.magnetSp = this.addChild(new Sprite(Assets.get("磁铁范围.png")));
+    this.magnetSp.anchor.set(0.5, 0.5);
+    Tween.get(this.magnetSp, { loop: true })
+      .to({ angle: 360 }, 1000);
+    this.magnetSp.visible = false;
+
     this.isLife = true;
     this.ready = true;
   }
@@ -103,6 +110,9 @@ export class Snake extends Container {
     let scale = this.bodyScale;
     if (this.magnetInfo.time) {
       scale *= GameConfig.magnetScale;
+      this.magnetSp.width = 46 * scale + 15;
+      this.magnetSp.height = 46 * scale + 15;
+      this.magnetSp.position.set(this.head.x, this.head.y);
     }
     this.collider.setScale(scale, scale);
 
@@ -238,12 +248,14 @@ export class Snake extends Container {
 
   /****************************** 磁铁 ******************************/
 
+  magnetSp: Sprite = null;
   magnetInfo = {
     time: 0,
   }
 
   useMagnet() {
     this.clearMagnet();
+    this.magnetSp.visible = true;
     this.magnetInfo.time = GameConfig.magnetTime;
     Tween.get(this.magnetInfo)
       .to({ time: 0 }, this.magnetInfo.time)
@@ -253,6 +265,7 @@ export class Snake extends Container {
   }
 
   clearMagnet() {
+    this.magnetSp.visible = false;
     Tween.removeTweens(this.magnetInfo);
     this.magnetInfo.time = 0;
   }

src/pages/GamePage/GamePage.less

@@ -101,6 +101,24 @@
 
   }
 
+
+  .preCdBg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .preCd {
+      width: 246px;
+      height: 325px;
+    }
+  }
+
   .backBtn {
     position: absolute;
     left: 17px;

src/pages/GamePage/GamePage.tsx

@@ -19,6 +19,10 @@ 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";
+import { SvgaPlayer } from "@grace/svgaplayer";
+
+
+import preCd from "./../../assets/GamePage/5倒计时.svga";
 
 export const collisionSys: System = new System();
 const DEBUG = true ;
@@ -30,16 +34,13 @@ export function getApp(): Application {
   return window["__app"];
 }
 
-export interface IGamePageState {
-}
-
-
 @observer
 class GamePage extends React.Component {
 
   gameOver: boolean = false;
 
-  state: IGamePageState = {
+  state = {
+    showPreCd: true,
   }
 
   gameDiv: HTMLDivElement = null;
@@ -51,7 +52,7 @@ class GamePage extends React.Component {
   game: Game = null;
   interval: any = 0;
 
-  paused: boolean = false;
+  paused: boolean = true;
 
   async componentDidMount() {
     gameStore.reset();
@@ -70,6 +71,8 @@ class GamePage extends React.Component {
 
     this.startCd();
 
+    this.setState({ showPreCd: true });
+
   }
 
   startCd = () => {
@@ -180,8 +183,16 @@ class GamePage extends React.Component {
     });
   }
 
+  onPreCdEnd = () => {
+    this.paused = false;
+    this.setState({
+      showPreCd: false,
+    })
+  }
+
   render() {
 
+    const { showPreCd } = this.state;
     const { score, cd } = gameStore.gameInfo;
 
     const min = prefixInteger(Math.floor(cd / 60), 2);
@@ -189,12 +200,7 @@ class GamePage extends React.Component {
 
     return <div className="GamePage">
       <div className="gameBg"/>
-      <div className="gameDiv" ref={(el) => this.gameDiv = el}>
-        {/*<canvas*/}
-        {/*  className="gameCanvas"*/}
-        {/*  ref={(el) => this.gameCanvas = el}*/}
-        {/*/>*/}
-      </div>
+      <div className="gameDiv" ref={(el) => this.gameDiv = el}/>
       {
         DEBUG && <canvas
           className="gameCanvas debugCanvas"
@@ -209,6 +215,9 @@ class GamePage extends React.Component {
       </div>
       <MusicBtn className="musicBtn"/>
       <Button className="backBtn" onClick={this.clickBack}/>
+      {showPreCd && <div className="preCdBg">
+        <SvgaPlayer className="preCd" loop={1} src={preCd} onEnd={this.onPreCdEnd}/>
+      </div>}
     </div>;
   }
 }

src/pages/GamePage/config/Config.ts

@@ -26,7 +26,7 @@ export interface EleData {
 export const GameConfig = {
   gameCd: 120,
   magnetTime: 10000,
-  magnetScale: 4,
+  magnetScale: 5,
   initEnergy: 10,
   growthThreshold: 2,
   levelCfg: [
@@ -89,7 +89,7 @@ export const EleConfig: { [key in Ele]: EleData } = {
   [Ele.ZongZi]: {
     cls: ZongZi,
     texture: "元素/粽子.png",
-    weight: 1,
+    weight: 111,
   }
 }