20

package.json

@@ -71,6 +71,7 @@
     "ali-oss": "^6.21.0",
     "autoprefixer": "^10.4.20",
     "dotenv": "^16.4.5",
+    "eruda": "^3.4.1",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",

pnpm-lock.yaml

@@ -183,6 +183,9 @@ importers:
       dotenv:
         specifier: ^16.4.5
         version: 16.4.7
+      eruda:
+        specifier: ^3.4.1
+        version: 3.4.1
       eslint:
         specifier: ^9.9.0
         version: 9.20.1(jiti@2.4.2)
@@ -1684,7 +1687,7 @@ packages:
     resolution: {integrity: sha512-lKTdfDhS38NrgEJaNagk1zgVX69hH8ZAi9vdpD3+G20EI5S+4W7bB/L+G9BpwsltJpeKAhOxnK0d31DGgD2zRg==}
 
   '@spark/circle-turntable@1.0.3':
-    resolution: {integrity: sha512-oJBskZlBFmuNQRmg7/OfkZ+T903f9+XMosWklbhnRNKBEwckYXR+ml+c8m1YVhgGjixFwdxtGaIY8BHtYUxBbg==, tarball: http://npm.dui88.com:80/@spark%2fcircle-turntable/-/circle-turntable-1.0.3.tgz}
+    resolution: {integrity: sha512-oJBskZlBFmuNQRmg7/OfkZ+T903f9+XMosWklbhnRNKBEwckYXR+ml+c8m1YVhgGjixFwdxtGaIY8BHtYUxBbg==}
     peerDependencies:
       react: ^17.0.2
       react-dom: 17.0.2
@@ -2450,7 +2453,7 @@ packages:
     resolution: {integrity: sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI=}
 
   db-react-helper@1.0.5:
-    resolution: {integrity: sha512-J4+DXr/Ah7t+/j96m73WzJ26VUfHzE5MxWj7kS62SV7iKCb5LTTcngWvn4jmpQnF54WAkhOjBt8sY6B+RkDPPA==, tarball: http://npm.dui88.com:80/db-react-helper/-/db-react-helper-1.0.5.tgz}
+    resolution: {integrity: sha512-J4+DXr/Ah7t+/j96m73WzJ26VUfHzE5MxWj7kS62SV7iKCb5LTTcngWvn4jmpQnF54WAkhOjBt8sY6B+RkDPPA==}
 
   debug@2.6.9:
     resolution: {integrity: sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=}
@@ -2624,6 +2627,9 @@ packages:
     resolution: {integrity: sha1-i7Ppx9Rjvkl2/4iPdrSAnrwugR8=, tarball: http://npm.dui88.com:80/errno/-/errno-0.1.8.tgz}
     hasBin: true
 
+  eruda@3.4.1:
+    resolution: {integrity: sha512-RmaO5yD97URY/9Q0lye3cmmNPoXNKreeePIw7c/zllbscR92CjGFZFuQ70+0fLIvLcKW3Xha8DS8NFhmeNbEBQ==, tarball: http://npm.dui88.com:80/eruda/-/eruda-3.4.1.tgz}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -3279,7 +3285,7 @@ packages:
     engines: {node: '>=8'}
 
   less-loader@11.1.4:
-    resolution: {integrity: sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==, tarball: http://npm.dui88.com:80/less-loader/-/less-loader-11.1.4.tgz}
+    resolution: {integrity: sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
       less: ^3.5.0 || ^4.0.0
@@ -4460,7 +4466,7 @@ packages:
       typescript: '>=4.8.4'
 
   tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==, tarball: http://npm.dui88.com:80/tslib/-/tslib-2.8.1.tgz}
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
   tweedle.js@2.1.0:
     resolution: {integrity: sha512-0ReQgVjepoZkE6t0upWNgCRbplHkQJQYk1LStXugwSR728GLFmGDRuaQJlxeC/iBlxud6+P1RdODjaO25vHAqw==}
@@ -7373,6 +7379,8 @@ snapshots:
       prr: 1.0.1
     optional: true
 
+  eruda@3.4.1: {}
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}

src/pages/GamePage/Game.ts

@@ -13,6 +13,7 @@ import { Level7 } from "@/pages/GamePage/Level/Level7.ts";
 import { Level8 } from "@/pages/GamePage/Level/Level8.ts";
 import { Level9 } from "@/pages/GamePage/Level/Level9.ts";
 import { Level10 } from "@/pages/GamePage/Level/Level10.ts";
+import { Level11 } from "@/pages/GamePage/Level/Level11.ts";
 import { Level13 } from "@/pages/GamePage/Level/Level13.ts";
 import { Level14 } from "@/pages/GamePage/Level/Level14.ts";
 import { Level15 } from "@/pages/GamePage/Level/Level15.ts";
@@ -34,7 +35,7 @@ export class Game extends Base {
     const qsBg = this.addChild(new Sprite(Assets.get("问题.png")));
     qsBg.position.set(49, 316);
 
-    this.level = this.addChild(new Level13());
+    this.level = this.addChild(new Level11());
     globalEvent.on(GameEvent.NextLevel, this.nextLevel, this);
 
     // this.nextLevel();

src/pages/GamePage/GamePage.module.less

@@ -6,6 +6,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 
   .gameCanvas {
     position: absolute;

src/pages/GamePage/Level/Level11.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 * as eruda from "eruda";
+
+eruda.init();
+
+export class Level11 extends LevelBase {
+
+  level: number = 11;
+
+  A: Sprite;
+
+  right: Sprite;
+  error: Sprite;
+
+  // 双指缩放相关属性
+  private initialDistance: number = 0;
+  private initialScale: number = 1;
+  private isTouching: boolean = false;
+  private touchPoints: Map<number, { x: number, y: number }> = new Map();
+
+  onLoad() {
+    super.onLoad();
+
+    this.addChild(new Sprite(Assets.get(`level${this.level}/长颈鹿.png`)))
+      .position.set(91, 765);
+
+    this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/冰箱.png`)));
+    this.A.anchor.set(0.5);
+    this.A.position.set(541, 956);
+    this.A.scale.set(0.5746031746031746);
+
+    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right.position.set(642, 1141);
+    this.right.alpha = 0;
+    this.right.interactive = false;
+    this.right.eventMode = "none";
+
+    this.A.on("pointerdown", this.onPointerDown, this);
+    this.A.on("globalpointermove", this.onPointerMove, this);
+    this.A.on("pointerup", this.onPointerUp, this);
+    this.A.on("pointerupoutside", this.onPointerUp, this);
+  }
+
+  onPointerDown(e) {
+    console.log("pointerdown", e.pointerId, e.data.global);
+
+    // 记录触摸点
+    this.touchPoints.set(e.pointerId, {
+      x: e.data.global.x,
+      y: e.data.global.y
+    });
+
+    // 如果有两个触摸点，开始缩放
+    if (this.touchPoints.size === 2) {
+      const points = Array.from(this.touchPoints.values());
+      this.initialDistance = this.getDistance(points[0], points[1]);
+      this.initialScale = this.A.scale.x;
+      this.isTouching = true;
+      console.log("开始缩放", this.initialDistance, this.initialScale);
+    }
+  }
+
+  onPointerMove(e) {
+    if (!this.touchPoints.has(e.pointerId)) return;
+
+    // 更新触摸点位置
+    this.touchPoints.set(e.pointerId, {
+      x: e.data.global.x,
+      y: e.data.global.y
+    });
+
+    if (this.isTouching && this.touchPoints.size === 2) {
+      const points = Array.from(this.touchPoints.values());
+      const currentDistance = this.getDistance(points[0], points[1]);
+
+      // 计算缩放比例
+      const scaleRatio = currentDistance / this.initialDistance;
+      const newScale = this.initialScale * scaleRatio;
+
+      // 限制最小和最大缩放
+      const finalScale = Math.max(0.5, Math.min(newScale, 5));
+      this.A.scale.set(finalScale);
+
+      console.log("缩放中", currentDistance, scaleRatio, finalScale);
+
+      // 检查是否达到目标大小
+      this.checkSize();
+    }
+  }
+
+  onPointerUp(e) {
+    console.log("pointerup", e.pointerId);
+
+    // 移除触摸点
+    this.touchPoints.delete(e.pointerId);
+
+    // 如果少于两个触摸点，停止缩放
+    if (this.touchPoints.size < 2) {
+      this.isTouching = false;
+      console.log("停止缩放");
+    }
+  }
+
+  getDistance(point1: { x: number, y: number }, point2: { x: number, y: number }): number {
+    const dx = point1.x - point2.x;
+    const dy = point1.y - point2.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  checkSize() {
+    if (this.A.scale.x >= 1) {
+      this.triggerSuccess();
+    }
+  }
+
+  triggerSuccess() {
+    // 防止重复触发
+    if (this.right.alpha > 0) return;
+
+    this.setTouchEnable(false);
+
+    Tween.get(this.right)
+      .to({ alpha: 1 }, 444, Ease.quadInOut)
+      .wait(2000)
+      .call(() => {
+        globalEvent.emit(GameEvent.NextLevel);
+      });
+  }
+
+  onDestroy() {
+    super.onDestroy();
+    Tween.removeTweens(this.A);
+    Tween.removeTweens(this.right);
+
+    // 移除触摸事件监听
+    this.A.off("pointerdown", this.onPointerDown, this);
+    this.A.off("globalpointermove", this.onPointerMove, this);
+    this.A.off("pointerup", this.onPointerUp, this);
+    this.A.off("pointerupoutside", this.onPointerUp, this);
+  }
+}

src/pages/GamePage/Level/Level13.ts

 import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
-import { Assets, Sprite } from "pixi.js";
+import { Assets, Circle, Sprite } from "pixi.js";
 import { Ease, Tween } from "@/core/tween";
 import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
 

src/pages/GamePage/Level/LevelConfig.ts

@@ -8,6 +8,7 @@ import { Level7 } from "@/pages/GamePage/Level/Level7.ts";
 import { Level8 } from "@/pages/GamePage/Level/Level8.ts";
 import { Level9 } from "@/pages/GamePage/Level/Level9.ts";
 import { Level10 } from "@/pages/GamePage/Level/Level10.ts";
+import { Level11 } from "@/pages/GamePage/Level/Level11.ts";
 import { Level13 } from "@/pages/GamePage/Level/Level13.ts";
 import { Level14 } from "@/pages/GamePage/Level/Level14.ts";
 import { Level15 } from "@/pages/GamePage/Level/Level15.ts";
@@ -29,7 +30,7 @@ export const LevelArr = [
   { cls: Level8, tip: `最深的颜色是题目` },
   { cls: Level9, tip: `移动小鸭子至河边` },
   { cls: Level10, tip: `将“1”移动至等号右边<br/>形成等式` },
-  { cls: Level9, tip: `将冰箱放大至能装够装下<br/>长颈鹿` }, // 11
+  { cls: Level11, tip: `将冰箱放大至能装够装下<br/>长颈鹿` },
   { cls: Level9, tip: `掐断烟头` }, // 12
   { cls: Level13, tip: `打开盖子看看` },
   { cls: Level14, tip: `将香蕉移动到牛奶中<br/>变成香蕉牛奶` },