init

package.json

@@ -15,6 +15,7 @@
     "@grace/built-in": "*",
     "@grace/svgaplayer": "*",
     "@grace/ui": "*",
+    "@pixi/ui": "^2.2.3",
     "@spark/circle-turntable": "^1.0.3",
     "@spark/dbdomain": "^1.0.25",
     "@tailwindcss/postcss": "^4.0.6",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@grace/ui':
         specifier: '*'
         version: 1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@pixi/ui':
+        specifier: ^2.2.3
+        version: 2.2.3(pixi.js@8.9.1)
       '@spark/circle-turntable':
         specifier: ^1.0.3
         version: 1.0.3(less@4.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(webpack@5.98.0(esbuild@0.25.3))
@@ -971,6 +974,11 @@ packages:
   '@pixi/colord@2.9.6':
     resolution: {integrity: sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA==}
 
+  '@pixi/ui@2.2.3':
+    resolution: {integrity: sha512-xJ3EPoRQRM3BpsTU+BZ6g9cB3EFsgT0kr4IVciaN4Sq+DZUHB39GzpPZD47AsgkZt1WEf1bUKznXoiEOot+JLA==, tarball: http://npm.dui88.com:80/@pixi%2fui/-/ui-2.2.3.tgz}
+    peerDependencies:
+      pixi.js: ^8.6.2
+
   '@protobufjs/aspromise@1.1.2':
     resolution: {integrity: sha1-m4sMxmPWaafY9vXQiToU00jzD78=}
 
@@ -3003,10 +3011,16 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tweedle.js@2.1.0:
+    resolution: {integrity: sha512-0ReQgVjepoZkE6t0upWNgCRbplHkQJQYk1LStXugwSR728GLFmGDRuaQJlxeC/iBlxud6+P1RdODjaO25vHAqw==, tarball: http://npm.dui88.com:80/tweedle.js/-/tweedle.js-2.1.0.tgz}
+
   type-check@0.4.0:
     resolution: {integrity: sha1-B7ggO/pwVsBlcFDjzNLDdzC6uPE=}
     engines: {node: '>= 0.8.0'}
 
+  typed-signals@2.5.0:
+    resolution: {integrity: sha512-m9lHc3eBCJerXYdx+G0uWZihyUXdqTzzgOdqiDDsoUo75WjhFJH6vP5/6w/xhyu04zoxHUqgYhf9FEt85dk/Ng==, tarball: http://npm.dui88.com:80/typed-signals/-/typed-signals-2.5.0.tgz}
+
   typescript-eslint@8.24.1:
     resolution: {integrity: sha512-cw3rEdzDqBs70TIcb0Gdzbt6h11BSs2pS0yaq7hDWDBtCCSei1pPSUXE9qUdQ/Wm9NgFg8mKtMt1b8fTHIl1jA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4049,6 +4063,12 @@ snapshots:
 
   '@pixi/colord@2.9.6': {}
 
+  '@pixi/ui@2.2.3(pixi.js@8.9.1)':
+    dependencies:
+      pixi.js: 8.9.1
+      tweedle.js: 2.1.0
+      typed-signals: 2.5.0
+
   '@protobufjs/aspromise@1.1.2': {}
 
   '@protobufjs/base64@1.1.2': {}
@@ -6068,10 +6088,14 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tweedle.js@2.1.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
 
+  typed-signals@2.5.0: {}
+
   typescript-eslint@8.24.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.5.4):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.24.1(@typescript-eslint/parser@8.24.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.5.4))(eslint@9.20.1(jiti@2.4.2))(typescript@5.5.4)

src/App.tsx

@@ -17,6 +17,7 @@ import { GetCurrSkinId, getCustomShareId } from "@/utils/utils.ts";
 
 import HomePage from "@/pages/HomePage/HomePage.tsx";
 import MyPrize from "@/pages/MyPrize/MyPrize.tsx";
+import GamePage from "@/pages/GamePage/GamePage.tsx";
 
 @observer
 class App extends Component {
@@ -26,7 +27,7 @@ class App extends Component {
     const defaultPage = {
       myPrize: MyPrize, // TODO 举例子 新宿台奖品页
       index: HomePage,
-    }[skinId] || HomePage;
+    }[skinId] || GamePage;
     PageCtrl.changePage(defaultPage);
   }
 

src/MD.ts

 import { logClick, logExposure, MDAuto } from "@grace/built-in";
 import { IAutoMdData } from "@grace/built-in";
 import {getUrlParam} from "@/utils/utils.ts";
-import {posterIdKv} from "@/common.ts";
 
 const appId = CFG.appID;
 const dcm = "202." + CFG.projectId + ".0.0";
@@ -24,22 +23,6 @@ const MDList: IAutoMdData[] = new Array(20).fill("").map((_, i) => {
   };
 });
 
-posterIdKv.forEach((card, index)=>{
-  MDList.push({
-    ele: `.md19_${index}`,
-    data: {
-      dpm: `${appId}.110.19.${index}`,
-      dcm,
-      dom,
-      domain,
-      appId,
-    },
-    once: false,
-  })
-});
-
-
-
 
 MDAuto({
   show: MDList, // 曝光

src/common.ts

-export enum ECard {
-  CARD_0 = "依法求偿权",
-  CARD_1 = "信息安全权",
-  CARD_2 = "公平交易权",
-  CARD_3 = "受尊重权",
-  CARD_4 = "受教育权",
-  CARD_5 = "知情权",
-  CARD_6 = "自主选择权",
-  CARD_7 = "财产安全权",
-}
-
-export enum ECardType {
-  A = "A",
-  B = "B",
-}
-
-export const posterIdKv = [
-  null, ECard.CARD_0, ECard.CARD_1, ECard.CARD_2, ECard.CARD_3,
-  ECard.CARD_4, ECard.CARD_5, ECard.CARD_6, ECard.CARD_7,
-];
-
-export function getPosterId(card: ECard) {
-  return posterIdKv.indexOf(card);
-}
-

src/core/ctrls/PageCtrl.tsx

@@ -45,7 +45,6 @@ export class PageCtrl extends Component<{}, PageCtrlState> {
     const { pages } = this.state;
     if (!pages.length) return null;
     const curPage = pages[pages.length - 1];
-    console.log(pages)
     return <curPage.Component {...curPage.props}/>;
   }
 }

src/pages/GamePage/Components/Joystick.ts

+import { Assets, Container, Sprite, Point, Application, ApplicationInitHook } from "pixi.js";
+import { getApp } from "@/pages/GamePage/GamePage.tsx";
+import { GameEvent } from "@/pages/GamePage/GameEvent.ts";
+
+const radius = 210 / 2;
+
+export class Joystick extends Container {
+
+  handle: Sprite = null;
+
+  dir: Point = new Point();
+
+  constructor() {
+    super();
+    this.initUI();
+  }
+
+  initUI() {
+    const bg = new Sprite(Assets.get("摇杆背景.png"));
+    bg.anchor.set(0.5, 0.5);
+    this.addChild(bg);
+
+    this.handle = new Sprite(Assets.get("摇杆手柄.png"));
+    this.handle.anchor.set(0.5, 0.5);
+    this.addChild(this.handle);
+    this.handle.on("pointerdown", this.handlePointerDown, this);
+  }
+
+  calcDir(x: number, y: number) {
+    const dx = x - this.x;
+    const dy = y - this.y;
+
+    this.dir.set(dx, dy);
+
+    const len = this.dir.magnitude();
+    if (len > radius) {
+      this.dir.multiplyScalar(radius / len, this.dir);
+    }
+
+    this.handle.position.set(this.dir.x, this.dir.y);
+
+    if (len != 0) this.dir.normalize(this.dir);
+
+    this.emit(GameEvent.DIR_CHANGE, this.dir);
+  }
+
+  handlePointerDown = (e: any) => {
+    this.calcDir(e.data.global.x, e.data.global.y);
+
+    const handlePointerMove = (e: any) => {
+      this.calcDir(e.data.global.x, e.data.global.y);
+    }
+
+    const handlePointerUp = () => {
+      this.calcDir(this.x, this.y);
+      getApp().stage.off("pointermove", handlePointerMove);
+      getApp().stage.off("pointerup", handlePointerUp);
+    }
+    getApp().stage.on("pointermove", handlePointerMove);
+    getApp().stage.on("pointerup", handlePointerUp);
+  }
+
+}

src/pages/GamePage/Game.ts

+import { Assets, Container, Sprite, Ticker } from "pixi.js";
+import bgImg from "@/assets/GamePage/bg.jpg";
+import { Joystick } from "@/pages/GamePage/Components/Joystick.ts";
+import 'pixi.js/math-extras';
+
+export class Game extends Container {
+
+  joystick: Joystick = null;
+
+  constructor() {
+    super();
+    this.initUI();
+  }
+
+  initUI() {
+
+    const bg = this.addChild(new Sprite());
+    Assets.load(bgImg).then((texture) => bg.texture = texture);
+
+    this.joystick = this.addChild(new Joystick());
+    this.joystick.visible = false;
+
+
+    this.on("pointerdown", this.onPointerDown, this);
+    this.on("pointerup", this.onPointerUp, this);
+
+  }
+
+  onPointerDown(e: any) {
+    this.joystick.visible = true;
+    this.joystick.x = e.data.global.x;
+    this.joystick.y = e.data.global.y;
+    this.joystick.handlePointerDown(e);
+  }
+
+  onPointerUp(e: any) {
+    this.joystick.visible = false;
+  }
+
+  onUpdate(time: Ticker) {
+    // 更新游戏逻辑
+  }
+}

src/pages/GamePage/GameEvent.ts

 /** 游戏事件 */
 export enum GameEvent {
-  ClickCard = "ClickCard",
-  PosterClose = "PosterClose",
+  DIR_CHANGE = "DIR_CHANGE",
 }

src/pages/GamePage/GamePage.less

@@ -34,4 +34,22 @@
     height: 46px;
   }
 
+  .scoreArea {
+    position: absolute;
+    left: 236px;
+    top: 214px;
+    width: 277px;
+    height: 79px;
+    .webpBg("GamePage/我的分数.png");
+  }
+
+  .backBtn {
+    position: absolute;
+    left: 17px;
+    top: 216px;
+    width: 74px;
+    height: 76px;
+    .webpBg("GamePage/返回.png");
+  }
+
 }

src/pages/GamePage/GamePage.tsx

 import React from 'react';
-import {observer} from 'mobx-react';
+import { observer } from 'mobx-react';
 import './GamePage.less';
-import {Button, Toast} from "@grace/ui";
+import { Button } from "@grace/ui";
 
-import {AnimatedSprite, Application, Assets, Sprite, Ticker} from "pixi.js";
-import {Ease, Tween} from "./tween";
+import { Application, Assets, Ticker } from "pixi.js";
+import { Tween } from "./tween";
 
-import bgImg from "../../assets/GamePage/bg.jpg";
-import {initBundle} from "@/pages/GamePage/Helper.ts";
+import { initBundle } from "@/pages/GamePage/Helper.ts";
 import MusicBtn from "@/core/components/MusicBtn/MusicBtn.tsx";
+import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+import { Game } from "@/pages/GamePage/Game.ts";
 
-export interface IGamePageState {
+export function getApp(): Application {
+  return window["__app"];
 }
 
-import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+export interface IGamePageState {
+}
 
 @observer
 class GamePage extends React.Component {
@@ -23,6 +26,7 @@ class GamePage extends React.Component {
 
   gameCanvas: HTMLCanvasElement = null;
   app: Application = null;
+  game: Game = null;
 
   async componentDidMount() {
     await initBundle();
@@ -67,14 +71,13 @@ class GamePage extends React.Component {
 
     app.ticker.add(this.onUpdate);
 
-    const bg = new Sprite();
-    Assets.load(bgImg).then((texture) => bg.texture = texture);
-    app.stage.addChild(bg);
+    this.game = app.stage.addChild(new Game());
 
   }
 
   onUpdate = (time: Ticker) => {
     Tween.flush();
+    this.game.onUpdate(time);
   };
 
   /**
@@ -91,6 +94,9 @@ class GamePage extends React.Component {
         className="gameCanvas"
         ref={(el) => this.gameCanvas = el}
       />
+      <div className="scoreArea">
+
+      </div>
       <MusicBtn className="musicBtn"/>
       <Button className="backBtn" onClick={this.clickBack}/>
     </div>;

src/store/gameStore.ts

@@ -3,13 +3,16 @@ import API from "@/api";
 import store from "@/store/store.ts";
 import {Toast} from "@grace/ui";
 import {AESEncrypt} from "@/utils/Crypto.ts";
-import {PAGE_MAP} from "@/utils/constants.ts";
-import {ECard, getPosterId} from "@/common.ts";
 import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
 import HomePage from "@/pages/HomePage/HomePage.tsx";
 
 class GameStore {
 
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+
   startInfo: {
     userRecordId?: number | string
   } = {}
@@ -67,18 +70,6 @@ class GameStore {
 
   }
 
-  async poster(card: ECard) {
-
-    const posterId = getPosterId(card);
-
-    const {success} = await API.poster({posterId});
-
-    return success;
-
-  }
-
 }
 
-const gameStore: GameStore = makeAutoObservable(new GameStore());
-
-export default gameStore;
+export default (new GameStore());

src/utils/constants.ts

-/**
- * 弹窗优先级 可以是负数， 不写默认是10， 数值越小，层级越高
- */
-
-export enum PAGE_MAP {
-  HOME_PAGE = "homePage",
-  LOADING_PAGE = "loadingPage",
-  GAME_PAGE = "gamePage",
-  PRIZE_PAGE = "MyPrize",
-  POSTER_PAGE = "PosterPage",
-  DRAW_PAGE = "drawPage",
-}
-