init

src/pages/GamePage/Components/LevelBase.ts

 import { Base, IBase } from "@/core/pixi/base/Base.ts";
 import { Assets, Container, Sprite, Ticker } from "pixi.js";
 
-export class LevelBase extends Base {
+export abstract class LevelBase extends Base {
 
-  level: number;
+  abstract level: number;
   qs: Sprite;
 
-  constructor(level: number) {
-    super();
-    this.level = level;
-  }
-
   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);
   }
 
-
   onUpdate(time: Ticker) {
 
   }

src/pages/GamePage/Game.ts

@@ -4,6 +4,8 @@ import { Base } from "@/core/pixi/base/Base.ts";
 import { observer, reactor } from "./mobx/decorators.ts";
 import { GameEvent, globalEvent } from "./GameEvent.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";
 
 @observer
 export class Game extends Base {
@@ -12,7 +14,7 @@ export class Game extends Base {
     const qsBg = this.addChild(new Sprite(Assets.get("问题.png")));
     qsBg.position.set(49, 316);
 
-    this.addChild(new Level1(1));
+    this.addChild(new Level3());
 
     globalEvent.on(GameEvent.ReceiveEffect, this.receiveEffect, this);
   }

src/pages/GamePage/Level/Level1.ts

@@ -4,6 +4,8 @@ import { Assets, Sprite } from "pixi.js";
 
 export class Level1 extends LevelBase {
 
+  level: number = 1;
+
   A: Sprite;
   B: Sprite;
   C: Sprite;
@@ -35,12 +37,23 @@ export class Level1 extends LevelBase {
     this.error.visible = false;
     this.error.interactive = false;
 
-    this.A.on("pointertap", this.onTapOption.bind(this, this.A));
+    [this.A, this.B, this.C, this.D]
+      .forEach((item) => {
+        item.on("pointertap", this.onTapOption.bind(this, item));
+      });
+
   }
 
-  onTapOption(option: Sprite) {
-    this.right.visible = true;
-    this.error.visible = false;
+  onTapOption(item: Sprite) {
+    const isRight = item === this.C;
+    this.right.visible = isRight;
+    this.error.visible = !isRight;
+
+    const dp = -10;
+
+    this.right.position.set(item.x + dp, item.y + dp);
+    this.error.position.set(item.x + dp, item.y + dp);
+
   }
 
 }

src/pages/GamePage/Level/Level2.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite } from "pixi.js";
+
+
+export class Level2 extends LevelBase {
+
+  level: number = 2;
+
+  A: Sprite;
+  B: Sprite;
+  C: Sprite;
+  D: Sprite;
+
+  right: Sprite;
+  error: Sprite;
+
+  onLoad() {
+    super.onLoad();
+
+    this.addChild(new Sprite(Assets.get(`level${this.level}/题图.png`)))
+      .position.set(246, 687);
+
+    this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
+    this.A.position.set(67, 1111);
+
+    this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
+    this.B.position.set(243, 1111);
+
+    this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
+    this.C.position.set(404, 1111);
+
+    this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
+    this.D.position.set(566, 1111);
+
+    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, this.D]
+      .forEach((item) => {
+        item.on("pointertap", this.onTapOption.bind(this, item));
+      });
+
+  }
+
+  onTapOption(item: Sprite) {
+    const isRight = item === this.D;
+    this.right.visible = isRight;
+    this.error.visible = !isRight;
+
+    const dp = -7;
+
+    this.right.position.set(item.x + dp, item.y + dp);
+    this.error.position.set(item.x + dp, item.y + dp);
+
+  }
+
+}

src/pages/GamePage/Level/Level3.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite } from "pixi.js";
+
+export class Level3 extends LevelBase {
+
+  level: number = 3;
+
+  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(100, 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(100, 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.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]
+      .forEach((item) => {
+        item.on("pointertap", this.onTapOption.bind(this, item));
+      });
+
+  }
+
+  onTapOption(item: Sprite) {
+    const isRight = item === this.A;
+    this.right.visible = isRight;
+    this.error.visible = !isRight;
+
+    const dp = -10;
+
+    this.right.position.set(item.x + dp, item.y + dp);
+    this.error.position.set(item.x + dp, item.y + dp);
+
+  }
+
+}

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";
+
+
+export const MAX_LEVEL = 25;
+
+export const LevelArr = [
+  Level1,
+  Level2,
+  Level3,
+];

src/store/gameStore.ts

 import { makeAutoObservable, } from 'mobx';
+import { MAX_LEVEL } from "@/pages/GamePage/Level/LevelConfig.ts";
 
 class GameStore {
 
@@ -6,24 +7,24 @@ class GameStore {
     makeAutoObservable(this);
   }
 
+  gameInfo = {
+    levelIndex: 1,
+    levelArr: [],
+  }
 
-  startInfo: {
-    recordId?: number | string
-    countdownSeconds?: number
-  } = {}
-
-  gameInfo: {
-    score: number,
-    remainTimes: number,
-    level: number,
-    maxScore: number,
-  } = {
-    score: 0,
-    remainTimes: 0,
-    level: 0,
-    maxScore: 0,
+  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;
   }
 
+  async submit() {
+
+    const score = this.gameInfo.levelIndex;
+
+  }
 }
 
 export default (new GameStore());

src/store/store.ts

@@ -3,8 +3,6 @@ import API from '../api/index';
 import { Toast } from "@grace/ui";
 import { initWx, IWxShareInfo } from "@/built-in/share/weixin/weixin.ts";
 import { _asyncThrottle, _debounce, getUrlParam } from '@/utils/utils';
-import { IBubbleInfo } from "@/pages/HomePage/Top/Components/Bubble.ts";
-import { IOverflowBubbleInfo } from "@/pages/HomePage/Top/Components/OverflowBubble.ts";
 import { getDomain } from '@spark/dbdomain';
 import { showShareGuide } from '@spark/share';
 
@@ -67,10 +65,6 @@ class Store {
       boolSign: boolean,
     }[],
 
-    overflowBubble?: IOverflowBubbleInfo,
-
-    bubbleRecords?: IBubbleInfo[],
-
     returnAwardCreditsNum?: number,
 
     downGoldVo?: {