11

src/App.tsx

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

src/pages/GamePage/Game.ts

@@ -14,6 +14,7 @@ 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 { Level12 } from "@/pages/GamePage/Level/Level12.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";
@@ -37,7 +38,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 Level24());
+    this.level = this.addChild(new Level5());
     globalEvent.on(GameEvent.NextLevel, this.nextLevel, this);
 
     // this.nextLevel();

src/pages/GamePage/Level/Level10.ts

@@ -29,7 +29,7 @@ export class Level10 extends LevelBase {
     this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
     this.A.position.set(81, 903);
 
-    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
     this.right.position.set(656, 1002);
     this.right.alpha = 0;
     this.right.interactive = false;

src/pages/GamePage/Level/Level11.ts

@@ -29,7 +29,7 @@ export class Level11 extends LevelBase {
     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 = this.addChild(new Sprite(Assets.get(`common/right.png`)));
     this.right.position.set(642, 1141);
     this.right.alpha = 0;
     this.right.interactive = false;

src/pages/GamePage/Level/Level12.ts

+import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
+import { Assets, Sprite, Graphics } from "pixi.js";
+import { Ease, Tween } from "@/core/tween";
+import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
+import { getApp } from "../GamePage";
+
+export class Level12 extends LevelBase {
+
+  level: number = 12;
+
+  A: Sprite; // 头
+  B: Sprite; // 尾
+
+  right: Sprite;
+
+  // 滑动轨迹相关
+  private trailGraphics: Graphics;
+  private isDrawing: boolean = false;
+  private startPoint: { x: number, y: number } | null = null;
+  private currentPoint: { x: number, y: number } | null = null;
+
+  // 香烟分离状态
+  private isSeparated: boolean = false;
+
+  onLoad() {
+    super.onLoad();
+
+    this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/头.png`)));
+    this.A.position.set(67, 923);
+
+    this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/尾.png`)));
+    this.B.position.set(265, 923);
+
+    this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
+    this.right.position.set(613, 1104);
+    this.right.alpha = 0;
+    this.right.interactive = false;
+    this.right.eventMode = "none";
+
+    // 创建绘制轨迹的Graphics对象
+    this.trailGraphics = this.addChild(new Graphics());
+    this.trailGraphics.zIndex = 1000; // 确保轨迹在最上层
+
+    // 启用stage交互
+    const app = getApp();
+    app.stage.interactive = true;
+    app.stage.eventMode = "static";
+
+    // 在stage上监听全局事件
+    app.stage.on("pointerdown", this.onPointerDown, this);
+    app.stage.on("globalpointermove", this.onPointerMove, this);
+    app.stage.on("pointerup", this.onPointerUp, this);
+    app.stage.on("pointerupoutside", this.onPointerUp, this);
+  }
+
+  onPointerDown(e) {
+    if (this.isSeparated) return;
+
+    console.log("开始滑动", e.data.global);
+    this.isDrawing = true;
+    this.startPoint = { x: e.data.global.x, y: e.data.global.y };
+    this.currentPoint = { x: e.data.global.x, y: e.data.global.y };
+
+    // 清除之前的轨迹
+    this.trailGraphics.clear();
+    console.log("清除轨迹，开始新的绘制");
+  }
+
+  onPointerMove(e) {
+    if (!this.isDrawing || this.isSeparated) return;
+
+    this.currentPoint = { x: e.data.global.x, y: e.data.global.y };
+
+    console.log("更新轨迹点", this.currentPoint);
+
+    // 绘制轨迹线条
+    this.drawTrail();
+  }
+
+  onPointerUp(e) {
+    if (!this.isDrawing || this.isSeparated) return;
+
+    console.log("结束滑动", "起点:", this.startPoint, "终点:", this.currentPoint);
+    this.isDrawing = false;
+
+    // 检查滑动轨迹是否经过香烟
+    if (this.checkTrailCrossedCigarette()) {
+      this.separateCigarette();
+    } else {
+      // 如果没有成功分离，清除轨迹
+      console.log("没有经过香烟，清除轨迹");
+      setTimeout(() => {
+        this.clearTrail();
+      }, 1000);
+    }
+  }
+
+  drawTrail() {
+    if (!this.startPoint || !this.currentPoint) return;
+
+    console.log("绘制轨迹，起点:", this.startPoint, "终点:", this.currentPoint);
+
+    this.trailGraphics.clear();
+
+    // 绘制从起点到终点的直线
+    this.trailGraphics.moveTo(this.startPoint.x, this.startPoint.y);
+    this.trailGraphics.lineTo(this.currentPoint.x, this.currentPoint.y);
+    this.trailGraphics.stroke({ width: 6, color: 0xffffff });
+
+    console.log("轨迹绘制完成，起点:", this.startPoint, "终点:", this.currentPoint);
+  }
+
+  checkTrailCrossedCigarette(): boolean {
+    if (!this.startPoint || !this.currentPoint) return false;
+
+    // 香烟的水平线段：从A的x到B的x+width
+    const cigaretteStartX = this.A.x;
+    const cigaretteEndX = this.B.x + this.B.width;
+    const cigaretteY = this.A.y + (this.A.height / 2); // 使用香烟中间的y坐标
+
+    console.log("香烟线段:", cigaretteStartX, "到", cigaretteEndX, "y坐标:", cigaretteY);
+
+    // 检查轨迹线段是否与香烟水平线段相交
+    const startY = this.startPoint.y;
+    const endY = this.currentPoint.y;
+
+    // 检查轨迹线段是否在y方向上跨越了香烟线段
+    if ((startY <= cigaretteY && endY >= cigaretteY) || (startY >= cigaretteY && endY <= cigaretteY)) {
+      // 计算轨迹线段在cigaretteY处的x坐标
+      const startX = this.startPoint.x;
+      const endX = this.currentPoint.x;
+
+      let intersectionX;
+      if (startY === endY) {
+        // 水平线段，取任意一个x坐标
+        intersectionX = startX;
+      } else {
+        // 计算交点的x坐标
+        const t = (cigaretteY - startY) / (endY - startY);
+        intersectionX = startX + t * (endX - startX);
+      }
+
+      console.log("交点x坐标:", intersectionX);
+
+      // 检查交点是否在香烟线段的x范围内
+      if (intersectionX >= cigaretteStartX && intersectionX <= cigaretteEndX) {
+        console.log("轨迹与香烟线段相交!");
+        return true;
+      }
+    }
+
+    console.log("轨迹未与香烟线段相交");
+    return false;
+  }
+
+  separateCigarette() {
+    console.log("开始分离香烟");
+    this.isSeparated = true;
+    this.setTouchEnable(false);
+
+    // 设置A的旋转锚点为尾巴连接处（B的左边缘）
+    const pivotX = this.B.x - this.A.x; // 相对于A的x偏移
+    const pivotY = this.A.height / 2; // A的中心高度
+    this.A.pivot.set(pivotX, pivotY);
+
+    // 调整A的位置以补偿pivot的变化
+    this.A.x += pivotX;
+    this.A.y += pivotY;
+
+    // A向下旋转90度并向下移动
+    Tween.get(this.A)
+      .to({
+        angle: -45, // 顺时针旋转90度
+        y: this.A.y + 60 // 向下移动60像素
+      }, 666, Ease.quadInOut)
+      .call(() => {
+        // 分离完成后，清除轨迹并显示通关
+        this.clearTrail();
+        setTimeout(() => {
+          this.triggerSuccess();
+        }, 500);
+      });
+
+    // B保持不动，不需要动画
+  }
+
+  clearTrail() {
+    console.log("清除轨迹动画");
+    Tween.get(this.trailGraphics)
+      .to({ alpha: 0 }, 222, Ease.quadInOut)
+      .call(() => {
+        this.trailGraphics.clear();
+        this.trailGraphics.alpha = 1;
+        console.log("轨迹已清除");
+      });
+  }
+
+  triggerSuccess() {
+    console.log("开始通关动画");
+
+    const rightX = this.B.x + this.B.width - this.right.width + 20;
+    const rightY = this.B.y + this.B.height - this.right.height + 20;
+
+    // 设置right的位置
+    this.right.position.set(rightX, rightY);
+
+    // 显示right图标并完成通关
+    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.B);
+    Tween.removeTweens(this.right);
+    Tween.removeTweens(this.trailGraphics);
+
+    // 移除事件监听
+    const app = getApp();
+    app.stage.off("pointerdown", this.onPointerDown, this);
+    app.stage.off("globalpointermove", this.onPointerMove, this);
+    app.stage.off("pointerup", this.onPointerUp, this);
+    app.stage.off("pointerupoutside", this.onPointerUp, this);
+  }
+}

src/pages/GamePage/Level/Level13.ts

@@ -29,7 +29,7 @@ export class Level13 extends LevelBase {
     this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
     this.A.position.set(161, 1086);
 
-    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
     this.right.position.set(255, 916);
     this.right.alpha = 0;
     this.right.interactive = false;

src/pages/GamePage/Level/Level14.ts

@@ -31,7 +31,7 @@ export class Level14 extends LevelBase {
     this.right.interactive = false;
     this.right.eventMode = "none";
 
-    this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
+    this.error = this.addChild(new Sprite(Assets.get(`common/error.png`)));
     this.error.visible = false;
     this.error.interactive = false;
 

src/pages/GamePage/Level/Level15.ts

@@ -50,7 +50,7 @@ export class Level15 extends LevelBase {
     this.right.interactive = false;
     this.right.eventMode = "none";
 
-    this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
+    this.error = this.addChild(new Sprite(Assets.get(`common/error.png`)));
     this.error.interactive = false;
     this.error.eventMode = "none";
 

src/pages/GamePage/Level/Level18.ts

@@ -32,7 +32,7 @@ export class Level18 extends LevelBase {
     this.ice2 = this.addChild(new Sprite(Assets.get(`level18/ice2.png`)));
     this.ice2.position.set(148, 1100);
 
-    this.right = this.addChild(new Sprite(Assets.get(`level18/right.png`)));
+    this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
     this.right.position.set(433, 1173);
     this.right.alpha = 0;
     this.right.interactive = false;

src/pages/GamePage/Level/Level19.ts

@@ -29,7 +29,7 @@ export class Level19 extends LevelBase {
     this.A.position.set(430, 1100);
     this.A.scale.set(0.5948827292110874);
 
-    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
     this.right.position.set(613, 1104);
     this.right.alpha = 0;
     this.right.interactive = false;

src/pages/GamePage/Level/Level20.ts

@@ -35,7 +35,7 @@ export class Level20 extends LevelBase {
     top.interactive = false;
     top.eventMode = "none";
 
-    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
     this.right.position.set(503, 1146);
     this.right.alpha = 0;
     this.right.interactive = false;

src/pages/GamePage/Level/Level22.ts

@@ -29,7 +29,7 @@ export class Level22 extends LevelBase {
     x.interactive = false;
     x.eventMode = "none";
 
-    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
     this.right.position.set(452, 1242);
     this.right.alpha = 0;
     this.right.interactive = false;

src/pages/GamePage/Level/Level5.ts

@@ -35,7 +35,7 @@ export class Level5 extends LevelBase {
     this.right.alpha = 0;
     this.right.interactive = false;
 
-    this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
+    this.error = this.addChild(new Sprite(Assets.get(`common/error.png`)));
     this.error.visible = false;
     this.error.interactive = false;
 

src/pages/GamePage/Level/Level8.ts

@@ -30,7 +30,7 @@ export class Level8 extends LevelBase {
     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 = this.addChild(new Sprite(Assets.get(`common/right.png`)));
     this.right.position.set(518, 530);
     this.right.visible = false;
     this.right.interactive = false;

src/pages/GamePage/Level/Level9.ts

@@ -21,7 +21,7 @@ export class Level9 extends LevelBase {
     this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/duck.png`)));
     this.A.position.set(330, 764);
 
-    this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
+    this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
     this.right.position.set(470, 1050);
     this.right.alpha = 0;
     this.right.interactive = false;

src/pages/GamePage/Level/LevelConfig.ts

@@ -9,6 +9,7 @@ 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 { Level12 } from "@/pages/GamePage/Level/Level12.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";
@@ -33,7 +34,7 @@ export const LevelArr = [
   { cls: Level9, tip: `移动小鸭子至河边` },
   { cls: Level10, tip: `将“1”移动至等号右边<br/>形成等式` },
   { cls: Level11, tip: `将冰箱放大至能装够装下<br/>长颈鹿` },
-  { cls: Level9, tip: `掐断烟头` }, // 12
+  { cls: Level12, tip: `掐断烟头` },
   { cls: Level13, tip: `打开盖子看看` },
   { cls: Level14, tip: `将香蕉移动到牛奶中<br/>变成香蕉牛奶` },
   { cls: Level15, tip: `猫吃老鼠` },