init

src/App.tsx

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

src/pages/GamePage/Components/LevelBase.ts

@@ -6,14 +6,17 @@ export abstract class LevelBase extends Base {
   abstract level: number;
   qs: Sprite;
 
-  gameOver: boolean;
-
   onLoad() {
     this.qs = this.addChild(new Sprite(Assets.get(`level${this.level}/qs.png`)));
     this.qs.anchor.set(0.5);
     this.qs.position.set(375, 505);
   }
 
+  setTouchEnable(enable: boolean) {
+    this.interactive = enable;
+    this.interactiveChildren = enable;
+  }
+
   onUpdate(time: Ticker) {
 
   }

src/pages/GamePage/Game.ts

@@ -7,17 +7,52 @@ import { Level1 } from "@/pages/GamePage/Level/Level1.ts";
 import { Level2 } from "@/pages/GamePage/Level/Level2.ts";
 import { Level3 } from "@/pages/GamePage/Level/Level3.ts";
 import { Level4 } from "@/pages/GamePage/Level/Level4.ts";
+import { Level8 } from "@/pages/GamePage/Level/Level8.ts";
+import { Level23 } from "@/pages/GamePage/Level/Level23.ts";
+import gameStore from "@/store/gameStore.ts";
+import { LevelArr } from "@/pages/GamePage/Level/LevelConfig.ts";
+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Level7 } from "@/pages/GamePage/Level/Level7.ts";
 
 @observer
 export class Game extends Base {
 
+  level: LevelBase = null;
+
   onLoad() {
     const qsBg = this.addChild(new Sprite(Assets.get("问题.png")));
     qsBg.position.set(49, 316);
 
-    this.addChild(new Level4());
+    this.level = this.addChild(new Level7());
+
+    gameStore.start();
+
+    globalEvent.on(GameEvent.NextLevel, this.nextLevel, this);
+
+    // this.nextLevel();
+
+  }
+
+  nextLevel() {
+
+    gameStore.gameInfo.levelIndex++;
+
+    const { levelIndex, levelIdxArr } = gameStore.gameInfo;
+
+    if (levelIndex >= levelIdxArr.length) {
+      return;
+    }
+
+    const levelIdx = levelIdxArr[levelIndex];
+
+    if (this.level) {
+      this.level.removeFromParent();
+      this.level.destroy();
+    }
+
+    const cls = LevelArr[levelIdx];
 
-    globalEvent.on(GameEvent.ReceiveEffect, this.receiveEffect, this);
+    this.level = this.addChild(new cls());
   }
 
   receiveEffect(point: PointData) {

src/pages/GamePage/GameEvent.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from "pixi.js"
 
 /** 游戏事件 */
 export enum GameEvent {
-  ReceiveEffect = "RECEIVE_EFFECT",
+  NextLevel = "NextLevel",
 }
 
 

src/pages/GamePage/GamePage.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import store from "@/store/store.ts";
 
 import styles from "./GamePage.module.less";
-import { Application, Assets, Ticker } from "pixi.js";
+import { Application, Assets, Sprite, Ticker } from "pixi.js";
 import { Game } from "./Game.ts";
 import { initBundle } from "@/core/pixi/Helper.ts";
 import { Tween } from "@/core/tween";
@@ -12,9 +12,12 @@ import "@/core/pixi/base/mix.ts";
 import { initDevtools } from '@pixi/devtools';
 import { Button } from "@grace/ui";
 import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+import gameStore from "@/store/gameStore.ts";
 
 import.meta.env.DEV && initDevtools({});
 
+import bgImg from "../../assets/GamePage/bg.jpg";
+
 export function getApp(): Application {
   return window["__app"];
 }
@@ -74,10 +77,14 @@ class GamePage extends React.Component<any, any> {
 
     // const app = this.app = window["__app"];
 
+
     console.time("loadBundle");
     await Assets.loadBundle("Game");
     console.timeEnd("loadBundle");
 
+    const bg = this.app.stage.addChild(new Sprite());
+    Assets.load(bgImg).then((texture) => bg.texture = texture);
+
     this.app.ticker.add(this.onUpdate);
 
     this.game = app.stage.addChild(new Game());
@@ -98,13 +105,17 @@ class GamePage extends React.Component<any, any> {
 
   render() {
     const {} = store.indexData;
+    const { levelIndex, levelIdxArr } = gameStore.gameInfo;
+
+    const titleIdx = levelIdxArr[levelIndex] + 1;
+
     return <div className={styles.root} ref={(el) => this.gameDiv = el}>
 
       <canvas className={styles.gameCanvas} ref={(el) => this.gameCanvas = el}/>
 
       <div className={styles.cd}>180s</div>
       <img
-        src={new URL(`@/assets/GamePage/title/title1.png?x-oss-process=image/format,webp`, import.meta.url).href}
+        src={new URL(`../../assets/GamePage/title/title${titleIdx}.png?x-oss-process=image/format,webp`, import.meta.url).href}
         className={styles.title}
       />
       <Button className={styles.tipBtn} onClick={this.clickTip}/>

src/pages/GamePage/Level/Level1.ts

 import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
 import { Assets, Sprite } from "pixi.js";
-
+import { Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
 
 export class Level1 extends LevelBase {
 
@@ -46,14 +47,35 @@ export class Level1 extends LevelBase {
 
   onTapOption(item: Sprite) {
     const isRight = item === this.C;
-    this.right.visible = isRight;
-    this.error.visible = !isRight;
-
+    this.setTouchEnable(false);
     const dp = -10;
+    const wait = 2000;
+
+    if (isRight) {
+      this.right.visible = true;
+      this.right.position.set(item.x + dp, item.y + dp);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          globalEvent.emit(GameEvent.NextLevel);
+        });
+    } else {
+      this.error.visible = true;
+      this.error.position.set(item.x + dp, item.y + dp);
+      Tween.removeTweens(this.error);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          this.error.visible = false;
+          this.setTouchEnable(true);
+        });
+    }
 
-    this.right.position.set(item.x + dp, item.y + dp);
-    this.error.position.set(item.x + dp, item.y + dp);
+  }
 
+  onDestroy() {
+    super.onDestroy();
+    Tween.removeTweens(this.error);
   }
 
 }

src/pages/GamePage/Level/Level2.ts

 import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
 import { Assets, Sprite } from "pixi.js";
-
+import { Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
 
 export class Level2 extends LevelBase {
 
@@ -49,14 +50,35 @@ export class Level2 extends LevelBase {
 
   onTapOption(item: Sprite) {
     const isRight = item === this.D;
-    this.right.visible = isRight;
-    this.error.visible = !isRight;
-
+    this.setTouchEnable(false);
     const dp = -7;
+    const wait = 2000;
+
+    if (isRight) {
+      this.right.visible = true;
+      this.right.position.set(item.x + dp, item.y + dp);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          globalEvent.emit(GameEvent.NextLevel);
+        });
+    } else {
+      this.error.visible = true;
+      this.error.position.set(item.x + dp, item.y + dp);
+      Tween.removeTweens(this.error);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          this.error.visible = false;
+          this.setTouchEnable(true);
+        });
+    }
 
-    this.right.position.set(item.x + dp, item.y + dp);
-    this.error.position.set(item.x + dp, item.y + dp);
+  }
 
+  onDestroy() {
+    super.onDestroy();
+    Tween.removeTweens(this.error);
   }
 
 }

src/pages/GamePage/Level/Level23.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite } from "pixi.js";
+import { Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
+
+export class Level23 extends LevelBase {
+
+  level: number = 23;
+
+  A: Sprite;
+  B: Sprite;
+  C: Sprite;
+
+  right: Sprite;
+  error: Sprite;
+
+  onLoad() {
+    super.onLoad();
+
+    this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
+    this.A.position.set(55, 815);
+
+    this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
+    this.B.position.set(286, 815);
+
+    this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
+    this.C.position.set(516, 815);
+
+    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right.visible = false;
+    this.right.interactive = false;
+
+    this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
+    this.error.visible = false;
+    this.error.interactive = false;
+
+    [this.A, this.B, this.C]
+      .forEach((item) => {
+        item.on("pointertap", this.onTapOption.bind(this, item));
+      });
+
+  }
+
+  onTapOption(item: Sprite) {
+    const isRight = item === this.A;
+    this.setTouchEnable(false);
+    const dp = -9;
+    const wait = 2000;
+
+    if (isRight) {
+      this.right.visible = true;
+      this.right.position.set(item.x + dp, item.y + dp);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          globalEvent.emit(GameEvent.NextLevel);
+        });
+    } else {
+      this.error.visible = true;
+      this.error.position.set(item.x + dp, item.y + dp);
+      Tween.removeTweens(this.error);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          this.error.visible = false;
+          this.setTouchEnable(true);
+        });
+    }
+
+  }
+
+  onDestroy() {
+    super.onDestroy();
+    Tween.removeTweens(this.error);
+  }
+
+}

src/pages/GamePage/Level/Level3.ts

 import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
 import { Assets, Sprite } from "pixi.js";
+import { Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
 
 export class Level3 extends LevelBase {
 
@@ -45,14 +47,35 @@ export class Level3 extends LevelBase {
 
   onTapOption(item: Sprite) {
     const isRight = item === this.A;
-    this.right.visible = isRight;
-    this.error.visible = !isRight;
-
+    this.setTouchEnable(false);
     const dp = -10;
+    const wait = 2000;
+
+    if (isRight) {
+      this.right.visible = true;
+      this.right.position.set(item.x + dp, item.y + dp);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          globalEvent.emit(GameEvent.NextLevel);
+        });
+    } else {
+      this.error.visible = true;
+      this.error.position.set(item.x + dp, item.y + dp);
+      Tween.removeTweens(this.error);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          this.error.visible = false;
+          this.setTouchEnable(true);
+        });
+    }
 
-    this.right.position.set(item.x + dp, item.y + dp);
-    this.error.position.set(item.x + dp, item.y + dp);
+  }
 
+  onDestroy() {
+    super.onDestroy();
+    Tween.removeTweens(this.error);
   }
 
 }

src/pages/GamePage/Level/Level4.ts

 import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
 import { Assets, Sprite } from "pixi.js";
+import { Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
 
 export class Level4 extends LevelBase {
 
@@ -46,12 +48,34 @@ export class Level4 extends LevelBase {
 
   onTapOption(item: Sprite) {
     const isRight = item === this.D;
-    this.right.visible = isRight;
-    this.error.visible = !isRight;
-
+    this.setTouchEnable(false);
     const dp = -7;
-    this.error.position.set(item.x + dp, item.y + dp);
+    const wait = 2000;
+
+    if (isRight) {
+      this.right.visible = true;
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          globalEvent.emit(GameEvent.NextLevel);
+        });
+    } else {
+      this.error.visible = true;
+      this.error.position.set(item.x + dp, item.y + dp);
+      Tween.removeTweens(this.error);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          this.error.visible = false;
+          this.setTouchEnable(true);
+        });
+    }
+
+  }
 
+  onDestroy() {
+    super.onDestroy();
+    Tween.removeTweens(this.error);
   }
 
 }

src/pages/GamePage/Level/Level7.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite } from "pixi.js";
+import { Ease, Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
+import { getApp } from "@/pages/GamePage/GamePage.tsx";
+
+export class Level7 extends LevelBase {
+
+  level: number = 7;
+
+  pig: Sprite;
+
+  coin: Sprite;
+
+  onLoad() {
+    super.onLoad();
+
+    this.pig = this.addChild(new Sprite(Assets.get("level7/pig.png")));
+    this.pig.anchor.set(0.5);
+    this.pig.position.set(380, 900);
+
+    this.coin = this.pig.addChild(new Sprite(Assets.get("level7/金币.png")));
+    this.coin.anchor.set(0.5);
+    this.coin.position.set(12, 35);
+
+    this.pig.addChild(new Sprite(Assets.get("level7/mask.png")))
+      .position.set(-203, -108);
+
+    getApp().stage.on("pointerdown", this.onPointerDown, this);
+    getApp().stage.on("pointermove",  this.onPointerMove, this);
+
+  }
+
+  passLevel() {
+    this.setTouchEnable(false);
+    getApp().stage.off("pointerdown", this.onPointerDown, this);
+    getApp().stage.off("pointermove",  this.onPointerMove, this);
+    Tween.get(this.pig)
+      .to({ angle: -180, }, 222)
+      .call(() => {
+        Tween.get(this.coin)
+          .to({ y: -300, }, 888, Ease.quadInOut)
+          .wait(2000)
+          .call(() => {
+            globalEvent.emit(GameEvent.NextLevel);
+          });
+      });
+  }
+
+  calcAngle(x: number, y: number) {
+    const centerX = 378;
+    const centerY = 812;
+    const dx = x - centerX;
+    const dy = y - centerY;
+    return Math.atan2(dy, dx) * (180 / Math.PI);
+  }
+
+  sAngle = 0;
+  onPointerMove = (e: any) => {
+    const { x, y } = e.data.global;
+    const angle = this.calcAngle(x, y);
+    this.pig.angle = angle - this.sAngle;
+
+    if (this.pig.angle < -150 && this.pig.angle > -200) {
+      this.passLevel();
+    }
+  };
+
+  onPointerDown(e) {
+    const { x: sx, y: sy } = e.data.global;
+    this.sAngle = this.calcAngle(sx, sy);
+  }
+
+  onDestroy() {
+    super.onDestroy();
+    Tween.removeTweens(this.pig);
+    Tween.removeTweens(this.coin);
+    getApp().stage.off("pointerdown", this.onPointerDown, this);
+    getApp().stage.off("pointermove",  this.onPointerMove, this);
+  }
+
+}

src/pages/GamePage/Level/Level8.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite } from "pixi.js";
+import { Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
+
+export class Level8 extends LevelBase {
+
+  level: number = 8;
+
+  A: Sprite;
+  B: Sprite;
+  C: Sprite;
+  D: Sprite;
+
+  right: Sprite;
+  error: Sprite;
+
+  onLoad() {
+    super.onLoad();
+
+    this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
+    this.A.position.set(99, 724);
+
+    this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
+    this.B.position.set(398, 724);
+
+    this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
+    this.C.position.set(99, 1002);
+
+    this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
+    this.D.position.set(398, 1002);
+
+    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right.position.set(518, 530);
+    this.right.visible = false;
+    this.right.interactive = false;
+
+    this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
+    this.error.visible = false;
+    this.error.interactive = false;
+
+    [this.A, this.B, this.C, this.D, this.qs]
+      .forEach((item) => {
+        item.on("pointertap", this.onTapOption.bind(this, item));
+      });
+
+  }
+
+  onTapOption(item: Sprite) {
+    const isRight = item === this.qs;
+    this.setTouchEnable(false);
+    const dp = -10;
+    const wait = 2000;
+
+    if (isRight) {
+      this.right.visible = true;
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          globalEvent.emit(GameEvent.NextLevel);
+        });
+    } else {
+      this.error.visible = true;
+      this.error.position.set(item.x + dp, item.y + dp);
+      Tween.removeTweens(this.error);
+      Tween.get(this.error)
+        .wait(wait)
+        .call(() => {
+          this.error.visible = false;
+          this.setTouchEnable(true);
+        });
+    }
+
+  }
+
+  onDestroy() {
+    super.onDestroy();
+    Tween.removeTweens(this.error);
+  }
+
+}

src/pages/GamePage/Level/LevelConfig.ts

 import { Level1 } from "@/pages/GamePage/Level/Level1.ts";
 import { Level2 } from "@/pages/GamePage/Level/Level2.ts";
 import { Level3 } from "@/pages/GamePage/Level/Level3.ts";
+import { Level4 } from "@/pages/GamePage/Level/Level4.ts";
+import { Level7 } from "@/pages/GamePage/Level/Level7.ts";
+import { Level8 } from "@/pages/GamePage/Level/Level8.ts";
+import { Level23 } from "@/pages/GamePage/Level/Level23.ts";
 
 
-export const MAX_LEVEL = 25;
-
 export const LevelArr = [
   Level1,
   Level2,
   Level3,
+  Level4,
+  Level7,
+  Level8,
+  Level23,
 ];

src/store/gameStore.ts

 import { makeAutoObservable, } from 'mobx';
-import { MAX_LEVEL } from "@/pages/GamePage/Level/LevelConfig.ts";
+import { LevelArr } from "@/pages/GamePage/Level/LevelConfig.ts";
 
 class GameStore {
 
@@ -8,16 +8,14 @@ class GameStore {
   }
 
   gameInfo = {
-    levelIndex: 1,
-    levelArr: [],
+    levelIndex: -1,
+    levelIdxArr: [],
   }
 
   async start() {
-    this.gameInfo.levelArr = new Array(MAX_LEVEL).fill(0).map((item, index) => {
-      return index + 1;
-    });
-    this.gameInfo.levelArr.sort((a, b) => Math.random() - 0.5);
-    this.gameInfo.levelIndex = 0;
+    this.gameInfo.levelIdxArr = LevelArr.map((_, index) => index);
+    this.gameInfo.levelIdxArr.sort(() => Math.random() - 0.5);
+    this.gameInfo.levelIndex = -1;
   }
 
   async submit() {