Merge branch 'master' of http://gitlab2.dui88.com/sparkprojects/rb_strongestbrain_250520

src/App.tsx

@@ -14,12 +14,10 @@ import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
 import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
 import { GetCurrSkinId, getCustomShareId } from "@/utils/utils.ts";
 
-import HomePage from "@/pages/HomePage/HomePage.tsx";
 import MyPrize from "@/pages/MyPrize/MyPrize.tsx";
 import LoadingDemo from "@/pages/LoadingDemo/LoadingDemo.tsx";
-import { loadFont } from "@/core/preload.ts";
 
-import zzgfyht from "@/assets/font/zzgfyht.ttf";
+import GamePage from "@/pages/GamePage/GamePage.tsx";
 
 
 @observer
@@ -30,7 +28,7 @@ class App extends Component {
     const defaultPage = {
       myPrize: MyPrize, // TODO 举例子 新宿台奖品页
       index: LoadingDemo,
-    }[skinId] || LoadingDemo;
+    }[skinId] || GamePage;
     PageCtrl.changePage(defaultPage);
   }
 

src/pages/HomePage/Top/Helper.ts → src/core/pixi/Helper.ts

@@ -4,8 +4,8 @@ const manifest = {
   bundles: [],
 }
 
-const prefix = "../../../assets/Game/";
-const files = import.meta.glob(`../../../assets/Game/**/*`, {
+const prefix = "../../assets/Game/";
+const files = import.meta.glob(`../../assets/Game/**/*`, {
   import: "default",
   eager: true,
 });

src/pages/GamePage/Components/LevelBase.ts

+import { Base, IBase } from "@/core/pixi/base/Base.ts";
+import { Assets, Container, Sprite, Ticker } from "pixi.js";
+
+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);
+  }
+
+  onUpdate(time: Ticker) {
+
+  }
+
+  onDestroy() {
+  }
+
+  destroy() {
+    this.onDestroy();
+    super.destroy();
+  }
+
+}

src/pages/GamePage/Game.ts

+import { Assets, PointData, Sprite, Ticker } from "pixi.js";
+import 'pixi.js/math-extras';
+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";
+import { Level4 } from "@/pages/GamePage/Level/Level4.ts";
+
+@observer
+export class Game extends Base {
+
+  onLoad() {
+    const qsBg = this.addChild(new Sprite(Assets.get("问题.png")));
+    qsBg.position.set(49, 316);
+
+    this.addChild(new Level4());
+
+    globalEvent.on(GameEvent.ReceiveEffect, this.receiveEffect, this);
+  }
+
+  receiveEffect(point: PointData) {
+
+  }
+
+  onUpdate(time: Ticker) {
+    // const dt = time.deltaMS / 1000;
+  }
+
+  onDestroy() {
+  }
+}

src/pages/GamePage/GamePage.module.less

+@import "../../res.less";
+
+.root {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  .gameCanvas {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 750px;
+    height: 1624px;
+    touch-action: auto !important;
+    transform: translateY(-50%);
+    .webpBg("GamePage/bg.jpg");
+  }
+
+  .backBtn {
+    position: absolute;
+    left: 40px;
+    top: 128px;
+    width: 30px;
+    height: 44px;
+    .webpBg("GamePage/返回.png");
+  }
+
+  .cd {
+    position: absolute;
+    left: 629px;
+    top: 94px;
+    width: 101px;
+    height: 101px;
+    .webpBg("GamePage/倒计时背景.png");
+
+    color: rgb(46, 76, 208);
+    font-size: 30px;
+    font-weight: bold;
+    text-align: center;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tipBtn {
+    position: absolute;
+    left: 575px;
+    bottom: 95px;
+    width: 139px;
+    height: 176px;
+    .webpBg("GamePage/提示.png");
+  }
+
+  .title {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 120px;
+    width: 160px;
+    height: 61px;
+    object-fit: contain;
+
+  }
+
+}

src/pages/HomePage/Top/Top.tsx → src/pages/GamePage/GamePage.tsx

@@ -2,19 +2,17 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import store from "@/store/store.ts";
 
-import styles from "./Top.module.less";
-import classNames from "classnames";
+import styles from "./GamePage.module.less";
 import { Application, Assets, Ticker } from "pixi.js";
-import { Game } from "@/pages/HomePage/Top/Game.ts";
-import { initBundle } from "@/pages/HomePage/Top/Helper.ts";
+import { Game } from "./Game.ts";
+import { initBundle } from "@/core/pixi/Helper.ts";
 import { Tween } from "@/core/tween";
-import { SvgaPlayer } from "@grace/svgaplayer";
-import "./base/mix.ts";
-
-import handSvga from "@/assets/svga/3牌子转动.svga";
+import "@/core/pixi/base/mix.ts";
 
 import { initDevtools } from '@pixi/devtools';
-import { unwatchPageVisibility, watchPageVisibility } from "@/core/page-visibility-notify.ts";
+import { Button } from "@grace/ui";
+import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+
 import.meta.env.DEV && initDevtools({});
 
 export function getApp(): Application {
@@ -22,7 +20,7 @@ export function getApp(): Application {
 }
 
 @observer
-class Top extends React.Component<any, any> {
+class GamePage extends React.Component<any, any> {
 
   gameCanvas: HTMLCanvasElement = null;
   gameDiv: HTMLDivElement = null;
@@ -32,11 +30,9 @@ class Top extends React.Component<any, any> {
   async componentDidMount() {
     await initBundle();
     await this.initStage();
-    watchPageVisibility(this.pageVisibilityChange);
   }
 
   componentWillUnmount() {
-    unwatchPageVisibility(this.pageVisibilityChange);
     Tween.removeAllTweens();
     this.app.ticker.remove(this.onUpdate);
     this.game.destroy({
@@ -46,12 +42,6 @@ class Top extends React.Component<any, any> {
     });
   }
 
-  pageVisibilityChange = (visible) => {
-    if (visible) {
-      store.updateIndex();
-    }
-  }
-
   async initStage() {
 
     // if (!gameCanvas) {
@@ -62,25 +52,24 @@ class Top extends React.Component<any, any> {
     // this.gameDiv.appendChild(gameCanvas);
 
     // if (!window["__app"]) {
-      const app = this.app = window["__app"] = new Application();
-      await app.init({
-        canvas: this.gameCanvas,
-        backgroundColor: "rgba(0, 0, 0, 0)",
-        width: 750,
-        height: 1000,
+    const app = this.app = window["__app"] = new Application();
+    await app.init({
+      canvas: this.gameCanvas,
+      width: 750,
+      height: 1624,
+      powerPreference: "high-performance",
+      // resolution: Math.min(window.devicePixelRatio, 2) || 1,
+      resolution: 1,
+      preference: "webgl",
+      webgl: {
+        backgroundAlpha: 0,
+        // preserveDrawingBuffer: true,
+        // antialias: true,
         powerPreference: "high-performance",
-        // resolution: Math.min(window.devicePixelRatio, 2) || 1,
-        resolution: 1,
-        preference: "webgl",
-        webgl: {
-          backgroundAlpha: 0,
-          // preserveDrawingBuffer: true,
-          // antialias: true,
-          powerPreference: "high-performance",
-        },
-        eventMode: "static",
-      });
-      app.renderer.accessibility.destroy();
+      },
+      eventMode: "static",
+    });
+    app.renderer.accessibility.destroy();
     // }
 
     // const app = this.app = window["__app"];
@@ -95,20 +84,33 @@ class Top extends React.Component<any, any> {
 
   }
 
-
   onUpdate = (time: Ticker) => {
     Tween.flush();
     this.game.onUpdate(time);
   };
 
+  clickBack = () => {
+    PageCtrl.backPage();
+  }
+
+  clickTip = () => {
+  }
+
   render() {
-    const {currentStoreNum, storeLimitNum} = store.indexData;
-    return <div className={styles.top} ref={(el) => this.gameDiv = el}>
+    const {} = store.indexData;
+    return <div className={styles.root} ref={(el) => this.gameDiv = el}>
+
       <canvas className={styles.gameCanvas} ref={(el) => this.gameCanvas = el}/>
-      <SvgaPlayer className={styles.handSvga} src={handSvga}/>
-      <div className={styles.credits}>积分:<span>{currentStoreNum}</span>/{storeLimitNum}</div>
+
+      <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}
+        className={styles.title}
+      />
+      <Button className={styles.tipBtn} onClick={this.clickTip}/>
+      <Button className={styles.backBtn} onClick={this.clickBack}/>
     </div>;
   }
 }
 
-export default Top;
+export default GamePage;

src/pages/GamePage/Level/Level1.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite } from "pixi.js";
+
+
+export class Level1 extends LevelBase {
+
+  level: number = 1;
+
+  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.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.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/Level4.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite } from "pixi.js";
+
+export class Level4 extends LevelBase {
+
+  level: number = 4;
+
+  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(73, 1061);
+
+    this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
+    this.B.position.set(296, 1061);
+
+    this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
+    this.C.position.set(519, 1061);
+
+    this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
+    this.D.position.set(269, 668);
+
+    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right.position.set(243, 658);
+    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.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/pages/HomePage/Top/Components/Bubble.ts

-import { Base, IBase } from "@/pages/HomePage/Top/base/Base.ts";
-import { Assets, Container, Sprite, Text, Ticker } from "pixi.js";
-import { Ease, Tween } from "@/core/tween";
-import store from "@/store/store.ts";
-import { _asyncThrottle, prefixInteger } from "@/utils/utils.ts";
-import API from "@/api";
-import { GameEvent, globalEvent } from "@/pages/HomePage/Top/GameEvent.ts";
-import { BubbleMgr } from "@/pages/HomePage/Top/Components/BubbleMgr.ts";
-import { handleLogClick, handleLogExposure } from "@/MD.ts";
-
-export interface IBubbleInfo {
-  id: string;
-  creditsNum: string,
-  expireTime: number,
-  type: "1" | "2",  // 1-签到气泡 2-积分气泡
-}
-
-export class Bubble extends Container implements IBase {
-  text: Text;
-  time: Text;
-  id: string;
-
-  constructor() {
-    super();
-    this.onLoad();
-    this.on("pointerup", this.onPointerUp, this);
-  }
-
-  onLoad() {
-    this.addChild(new Sprite(Assets.get("黄色气泡.png")))
-      .anchor.set(0.5);
-
-    this.text = this.addChild(new Text({
-      text: `210`,
-      style: {
-        fontSize: 42,
-        fill: 0xffffff,
-        align: "center",
-        fontWeight: "bold",
-      }
-    }));
-    this.text.anchor.set(0.5);
-
-    this.time = this.addChild(new Text({
-      text: `23:59:59`,
-      style: {
-        fontSize: 21,
-        fill: 0xffffff,
-        align: "center",
-        fontWeight: "bold",
-      }
-    }));
-    this.time.anchor.set(0.5);
-    this.time.position.set(0, 65);
-  }
-
-  onPointerUp = _asyncThrottle(async () => {
-    handleLogClick(3);
-    const { x, y, parent } = this;
-
-    const { bubbleArr, bubbleMap } = parent as BubbleMgr;
-    const i = bubbleArr.indexOf(this);
-    if (i !== -1) bubbleArr[i] = null;
-    bubbleMap.delete(this.id);
-
-    this.removeFromParent();
-    this.destroy();
-
-    const { success, data } = await API.receiveBubble({ id: this.id });
-    store.updateIndexThrottle();
-    if (success) {
-      globalEvent.emit(GameEvent.ReceiveEffect, { x, y });
-    }
-  });
-
-  ideaEffect(wait: number, dir = 1) {
-    const y = this.y;
-    Tween.get(this)
-      .wait(wait)
-      .call(() => {
-        Tween.get(this, { loop: true })
-          .to({ y: y + 25 * dir }, 2000, Ease.quadInOut)
-          .to({ y: y }, 2000, Ease.quadInOut);
-      });
-  }
-
-  cdTarget = { cd: 0 }
-
-  setInfo(info: IBubbleInfo) {
-    const { id, creditsNum, expireTime, type } = info;
-    this.id = id;
-    this.text.text = creditsNum;
-
-    this.cdTarget.cd = Math.max((expireTime - Date.now()) / 1000 >> 0, 1);
-    this.setTime();
-    Tween.removeTweens(this.cdTarget);
-    Tween.get(this.cdTarget, { loop: true })
-      .wait(1000)
-      .call(() => {
-        this.cdTarget.cd -= 1;
-        if (this.cdTarget.cd <= 0) {
-          this.cdTarget.cd = 0;
-          store.updateIndexThrottle();
-          Tween.removeTweens(this.cdTarget);
-        }
-        this.setTime();
-      });
-  }
-
-  setTime() {
-    const cd = this.cdTarget.cd;
-    const h = Math.floor(cd / 3600);
-    const min = Math.floor((cd - h * 3600) / 60);
-    const sec = Math.floor(cd - h * 3600 - min * 60);
-    this.time.text = `${prefixInteger(h, 2)}:${prefixInteger(min, 2)}:${prefixInteger(sec, 2)}`;
-  }
-
-  onUpdate(time: Ticker) {
-
-  }
-
-  onDestroy() {
-    Tween.removeTweens(this);
-    Tween.removeTweens(this.cdTarget);
-  }
-
-  destroy() {
-    this.onDestroy();
-    super.destroy();
-  }
-
-}

src/pages/HomePage/Top/Components/BubbleMgr.ts

-import { Base } from "@/pages/HomePage/Top/base/Base.ts";
-import { observer, reactor } from "@/pages/HomePage/Top/mobx/decorators.ts";
-import store from "@/store/store.ts";
-import { Bubble, IBubbleInfo } from "@/pages/HomePage/Top/Components/Bubble.ts";
-import { OverflowBubble } from "@/pages/HomePage/Top/Components/OverflowBubble.ts";
-import { handleLogExposure } from "@/MD.ts";
-
-const posArr = [
-  { x: 570, y: 250 },
-  { x: 675, y: 450 },
-  { x: 90, y: 440 },
-  { x: 645, y: 660 },
-]
-
-@observer
-export class BubbleMgr extends Base {
-
-  bubbleArr: Bubble[] = [];
-  bubbleMap: Map<string, Bubble> = new Map();
-
-  overflowBubble: OverflowBubble;
-
-  onLoad() {
-    this.overflowBubble = this.addChild(new OverflowBubble());
-  }
-
-  @reactor(() => store.indexData.bubbleRecords)
-  updateBubble(bubbleRecords: IBubbleInfo[]) {
-
-    if (!bubbleRecords?.length) return;
-
-    const newBubbleKeys = [];
-    bubbleRecords.forEach((info) => newBubbleKeys.push(info.id));
-
-    // 找到bubbleArr中不在newBubbleKeys中的bubble
-    this.bubbleArr.forEach((bubble, i) => {
-      if (i >= 4) return;
-      if (bubble && !newBubbleKeys.includes(bubble.id)) {
-        bubble.destroy();
-        this.bubbleArr[i] = null;
-        this.bubbleMap.delete(bubble.id);
-      }
-    });
-
-    // 更新数据
-    bubbleRecords.forEach((info, index) => {
-      const { id } = info;
-
-      let bubble = this.bubbleMap.get(id);
-
-      if (!bubble) {
-        bubble = this.addChild(new Bubble());
-        handleLogExposure(3);
-
-        // 找到bubbleArr第一个空的位置
-        let emptyPos = -1;
-        for (let i = 0; i < 4; i++) {
-          if (!this.bubbleArr[i]) {
-            emptyPos = i;
-            break;
-          }
-        }
-
-        bubble.position.set(posArr[emptyPos].x, posArr[emptyPos].y)
-        bubble.ideaEffect(150 * index, Math.random() > 0.5 ? 1 : -1);
-
-        this.bubbleArr[emptyPos] = bubble;
-        this.bubbleMap.set(id, bubble);
-      }
-      bubble.setInfo(info);
-    });
-
-  }
-
-  onDestroy() {
-  }
-
-}

src/pages/HomePage/Top/Components/OverflowBubble.ts

-import { Base, IBase } from "@/pages/HomePage/Top/base/Base.ts";
-import { Assets, Container, Sprite, Text, Ticker } from "pixi.js";
-import { Ease, Tween } from "@/core/tween";
-import store from "@/store/store.ts";
-import { _asyncThrottle, prefixInteger } from "@/utils/utils.ts";
-import { reactor, observer } from "@/pages/HomePage/Top/mobx/decorators.ts";
-import { BubbleMgr } from "@/pages/HomePage/Top/Components/BubbleMgr.ts";
-import API from "@/api";
-import { GameEvent, globalEvent } from "@/pages/HomePage/Top/GameEvent.ts";
-import { handleLogClick, handleLogExposure } from "@/MD.ts";
-
-export interface IOverflowBubbleInfo {
-  id: string;
-  creditsNum: string,
-  expireTime: number,
-}
-
-@observer
-export class OverflowBubble extends Container implements IBase {
-
-  text: Text;
-  time: Text;
-  id: string;
-
-  constructor() {
-    super();
-    this.onLoad();
-    this.on("pointerup", this.onPointerUp, this);
-  }
-
-  onLoad() {
-    this.position.set(200, 240);
-
-    this.addChild(new Sprite(Assets.get("红色气泡.png")))
-      .anchor.set(0.5);
-
-    this.text = this.addChild(new Text({
-      text: `210`,
-      style: {
-        fontSize: 32,
-        fill: 0xffffff,
-        align: "center",
-        fontWeight: "bold",
-      }
-    }));
-    this.text.anchor.set(0.5);
-
-    this.time = this.addChild(new Text({
-      text: `23:59:59`,
-      style: {
-        fontSize: 21,
-        fill: 0xffffff,
-        align: "center",
-      }
-    }));
-    this.time.anchor.set(0.5);
-    this.time.position.set(0, 26);
-
-    const tsp = this.addChild(new Sprite(Assets.get("标语.png")));
-    tsp.anchor.set(0.5);
-    tsp.position.set(0, 58);
-
-    this.effect();
-
-  }
-
-  onPointerUp = _asyncThrottle(async () => {
-    handleLogClick(2);
-    wx.miniProgram.switchTab({ url: "/pages/scan" });
-  });
-
-  effect() {
-    const y = this.y;
-    Tween.get(this, { loop: true })
-      .to({ y: y + 25 }, 2000, Ease.quadInOut)
-      .to({ y: y }, 2000, Ease.quadInOut);
-  }
-
-  cdTarget = { cd: 0 }
-
-  @reactor(() => store.indexData.overflowBubble)
-  updateOverflow(info: IOverflowBubbleInfo) {
-    if (!info) {
-      this.visible = false;
-      Tween.removeTweens(this.cdTarget);
-      return;
-    }
-
-    const { id, creditsNum, expireTime } = info;
-    if (expireTime - Date.now()) {
-      this.visible = false;
-      Tween.removeTweens(this.cdTarget);
-      return;
-    }
-
-    if (!this.visible) {
-      handleLogExposure(2);
-    }
-
-    this.visible = true;
-    this.id = id;
-    this.text.text = creditsNum;
-
-    this.cdTarget.cd = Math.max((expireTime - Date.now()) / 1000 >> 0, 1);
-
-    this.setTime();
-    Tween.removeTweens(this.cdTarget);
-    Tween.get(this.cdTarget, { loop: true })
-      .wait(1000)
-      .call(() => {
-        this.cdTarget.cd -= 1;
-        if (this.cdTarget.cd <= 0) {
-          this.cdTarget.cd = 0;
-          store.updateIndexThrottle();
-          Tween.removeTweens(this.cdTarget);
-        }
-        this.setTime();
-      });
-  }
-
-  setTime() {
-    const cd = this.cdTarget.cd;
-    const h = Math.floor(cd / 3600);
-    const min = Math.floor((cd - h * 3600) / 60);
-    const sec = Math.floor(cd - h * 3600 - min * 60);
-    this.time.text = `${prefixInteger(h, 2)}:${prefixInteger(min, 2)}:${prefixInteger(sec, 2)}`;
-  }
-
-  onUpdate(time: Ticker) {
-
-  }
-
-  onDestroy() {
-    Tween.removeTweens(this);
-    Tween.removeTweens(this.cdTarget);
-  }
-
-  destroy() {
-    this.onDestroy();
-    super.destroy();
-  }
-
-}

src/pages/HomePage/Top/Game.ts

-import { AnimatedSprite, Assets, Container, PointData, Sprite, Ticker } from "pixi.js";
-import 'pixi.js/math-extras';
-import { prefixInteger } from "@/utils/utils.ts";
-import { Base } from "@/pages/HomePage/Top/base/Base.ts";
-import { observer, reactor } from "@/pages/HomePage/Top/mobx/decorators.ts";
-import store from "@/store/store.ts";
-import { GifSprite } from "pixi.js/gif";
-import { BubbleMgr } from "@/pages/HomePage/Top/Components/BubbleMgr.ts";
-import { Ease, Tween } from "@/core/tween";
-import { GameEvent, globalEvent } from "@/pages/HomePage/Top/GameEvent.ts";
-
-@observer
-export class Game extends Base {
-
-  fullAni: AnimatedSprite;
-  dropAni: GifSprite;
-  bubbleMgr: BubbleMgr;
-
-  onLoad() {
-    const bg = this.addChild(new Sprite(Assets.get("招财猫_底.png")));
-    bg.position.set(168, 332);
-
-    const fullTextures = new Array(300).fill(0).map((_, i) => {
-      return Assets.get(`落金币/落金币_${prefixInteger(i, 5)}.png`);
-    });
-
-    const fullAni = this.fullAni = this.addChild(new AnimatedSprite(fullTextures));
-    fullAni.scale.set(0.66);
-    fullAni.anchor.set(0.5);
-    fullAni.position.set(375, 553);
-    fullAni.loop = false;
-    // fullAni.play();
-
-    const dropAni = this.dropAni = this.addChild(new GifSprite({ source: Assets.get("撒金币.gif") }));
-    dropAni.anchor.set(0.5);
-    dropAni.position.set(375, 339);
-    dropAni.loop = true;
-    dropAni.play();
-    this.dropAni.visible = false;
-
-    const top = this.addChild(new Sprite(Assets.get("招财猫_叠.png")));
-    top.position.set(168, 332);
-    // top.alpha = 0.7;
-
-    const smile = this.addChild(new Sprite(Assets.get("表情_微笑.png")));
-    smile.anchor.set(0.5);
-    smile.scale.set(0.66);
-    smile.position.set(378, 564);
-
-    this.bubbleMgr = this.addChild(new BubbleMgr());
-
-    globalEvent.on(GameEvent.ReceiveEffect, this.receiveEffect, this);
-  }
-
-  playTo(progress: number) {
-    progress = Math.min(Math.max(progress, 0), 1);
-
-    const nowFrame = this.fullAni.currentFrame;
-    const targetFrame = Math.floor(this.fullAni.totalFrames * progress);
-
-    const isPositive = nowFrame < targetFrame;
-    this.fullAni.animationSpeed = isPositive ? 1 : -1;
-    this.dropAni.visible = isPositive;
-
-    this.fullAni.play();
-    this.fullAni.onFrameChange = (currentFrame) => {
-      if (currentFrame === targetFrame - 1) {
-        this.fullAni.animationSpeed = 1;
-        this.fullAni.onFrameChange = null;
-        this.dropAni.visible = false;
-        this.fullAni.stop();
-      }
-    };
-  }
-
-  @reactor(() => store.indexData.currentStoreNum)
-  onStoreNumChange(currentStoreNum: number) {
-    this.playTo(currentStoreNum / store.indexData.storeLimitNum);
-  }
-
-  @reactor(() => store.indexData.storeLimitNum)
-  onStoreLimitChange(storeLimitNum: number) {
-    this.playTo(store.indexData.currentStoreNum / storeLimitNum);
-  }
-
-  receiveEffect(point: PointData) {
-    for (let i = 0; i < 5; i++) {
-      const sp = this.addChild(new Sprite(Assets.get("黄色气泡.png")));
-      sp.anchor.set(0.5)
-      sp.position.set(point.x, point.y);
-      Tween.get(sp)
-        .wait(i * 50)
-        .to({ alpha: 0.7, scaleX: 0.5, scaleY: 0.5, x: 80, y: 110 }, 888, Ease.quadOut)
-        .call(() => {
-          sp.destroy();
-        });
-    }
-  }
-
-  onUpdate(time: Ticker) {
-    // const dt = time.deltaMS / 1000;
-  }
-
-  onDestroy() {
-    this.dropAni.removeFromParent();
-  }
-}

src/pages/HomePage/Top/Top.module.less

-@import "../../../res.less";
-
-.top {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 750px;
-  height: 1000px;
-
-  .gameCanvas {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 750px;
-    height: 1000px;
-    touch-action: auto !important;
-  }
-
-  .handSvga {
-    position: absolute;
-    left: 100px;
-    top: 520px;
-    width: 201px;
-    height: 292px;
-    pointer-events: none;
-  }
-
-  .credits {
-    position: absolute;
-    left: 0;
-    top: 880px;
-    width: 750px;
-    font-size: 26px;
-    text-align: center;
-    color: #6f243d;
-    pointer-events: none;
-
-    span {
-      color: #f3304a;
-      font-weight: bold;
-    }
-  }
-
-
-}

src/pages/LoadingDemo/LoadingDemo.tsx

@@ -4,7 +4,6 @@ import { preload } from "@/core/preload.ts";
 import styles from "./LoadingDemo.module.less";
 import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
 import HomePage from "@/pages/HomePage/HomePage.tsx";
-import { initBundle } from "@/pages/HomePage/Top/Helper.ts";
 import { Assets } from "pixi.js";
 
 @observer
@@ -39,15 +38,10 @@ class LoadingDemo extends React.Component {
     const urls = Object.values(files) as string[];
 
     await preload(urls, (progress, loaded, total) => {
-      const percentage = progress * 0.5;
+      const percentage = progress;
       this.setEvenProgress(percentage);
     });
 
-    await initBundle();
-    await Assets.loadBundle(["Game"], (progress) => {
-      const percentage = 0.5 + progress * 0.5;
-      this.setEvenProgress(percentage);
-    });
     this.setEvenProgress(1);
 
     setTimeout(() => {

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?: {