升级动画

src/pages/GamePage/Game.ts

@@ -4,13 +4,15 @@ import { Joystick } from "@/pages/GamePage/Components/Joystick.ts";
 import 'pixi.js/math-extras';
 import { Snake } from "@/pages/GamePage/Components/Snake.ts";
 import { ElementMgr } from "@/pages/GamePage/Components/ElementMgr.ts";
-import { Ele, EleConfig, mapTop } from "@/pages/GamePage/config/Config.ts";
+import { Ele, EleConfig, GameConfig, mapTop, winSize } from "@/pages/GamePage/config/Config.ts";
 import { collisionSys } from "@/pages/GamePage/GamePage.tsx";
 import {Element} from "./Components/Element/Element.ts";
 
 import { Response, Body } from "detect-collisions";
 import gameStore from "@/store/gameStore.ts";
 import { ScoreBubble } from "@/pages/GamePage/Components/ScoreBubble.ts";
+import { reaction } from "mobx";
+import { Ease, Tween } from "@/pages/GamePage/tween";
 
 export class Game extends Container {
 
@@ -24,6 +26,24 @@ export class Game extends Container {
   constructor() {
     super();
     this.initUI();
+
+    reaction(
+      () => gameStore.gameInfo.level,
+      (level) => {
+        if(level == 0) return;
+        const skin = GameConfig.levelCfg[level].skin;
+        const sp = this.addChild(new Sprite(Assets.get(`蛇/${skin}/tip.png`)));
+        sp.position.set(375, winSize.height / 2 + 100);
+        sp.anchor.set(0.5, 0.5);
+        sp.scale.set(0, 0);
+        Tween.get(sp.scale)
+          .to({ x: 1, y: 1 }, 222, Ease.backOut)
+          .wait(1500)
+          .call(() => {
+            sp.removeFromParent();
+          });
+      }
+    );
   }
 
   initUI() {
@@ -47,7 +67,6 @@ export class Game extends Container {
     this.on("pointerup", this.onPointerUp, this);
   }
 
-
   onPointerDown(e: any) {
     this.joystick.visible = true;
     this.joystick.x = e.data.global.x;
@@ -98,7 +117,6 @@ export class Game extends Container {
     bubble.position.set(pos.x + 20, pos.y - 20);
   }
 
-
   onUpdate(time: Ticker) {
     const dt = time.deltaMS / 1000;
     this.snake.dir.copyFrom(this.joystick.dir);