tropsCode/src/views/game/fruit.vue

<template>
  <div class="game-container">
    <div id="game"></div>
  </div>
</template>

<script setup name="Fruit">
import { onMounted, ref } from 'vue';
import Phaser from 'phaser';
const { proxy } = getCurrentInstance();
const router = useRouter();
// 游戏容器和尺寸相关

const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;
const wRatio = document.documentElement.clientWidth / 640;
const hRatio = document.documentElement.clientHeight / 480;
const gameContainer = ref(null);
let game = null;
// 工具类
const mathTool = {
  init() {
  },

  // 计算延长线,p2往p1延长
  calcParallel(p1, p2, L) {
    const p = {};
    if (p1.x === p2.x) {
      if (p1.y - p2.y > 0) {
        p.x = p1.x;
        p.y = p1.y + L;
      } else {
        p.x = p1.x;
        p.y = p1.y - L;
      }
    } else {
      const k = (p2.y - p1.y) / (p2.x - p1.x);
      if (p2.x - p1.x < 0) {
        p.x = p1.x + L / Math.sqrt(1 + k * k);
        p.y = p1.y + L * k / Math.sqrt(1 + k * k);
      } else {
        p.x = p1.x - L / Math.sqrt(1 + k * k);
        p.y = p1.y - L * k / Math.sqrt(1 + k * k);
      }
    }
    p.x = Math.round(p.x);
    p.y = Math.round(p.y);
    return new Phaser.Math.Vector2(p.x, p.y);
  },

  // 计算垂直线,p2点开始垂直
  calcVertical(p1, p2, L, isLeft) {
    const p = {};
    if (p1.y === p2.y) {
      p.x = p2.x;
      if (isLeft) {
        if (p2.x - p1.x > 0) {
          p.y = p2.y - L;
        } else {
          p.y = p2.y + L;
        }
      } else {
        if (p2.x - p1.x > 0) {
          p.y = p2.y + L;
        } else {
          p.y = p2.y - L;
        }
      }
    } else {
      const k = -(p2.x - p1.x) / (p2.y - p1.y);
      if (isLeft) {
        if (p2.y - p1.y > 0) {
          p.x = p2.x + L / Math.sqrt(1 + k * k);
          p.y = p2.y + L * k / Math.sqrt(1 + k * k);
        } else {
          p.x = p2.x - L / Math.sqrt(1 + k * k);
          p.y = p2.y - L * k / Math.sqrt(1 + k * k);
        }
      } else {
        if (p2.y - p1.y > 0) {
          p.x = p2.x - L / Math.sqrt(1 + k * k);
          p.y = p2.y - L * k / Math.sqrt(1 + k * k);
        } else {
          p.x = p2.x + L / Math.sqrt(1 + k * k);
          p.y = p2.y + L * k / Math.sqrt(1 + k * k);
        }
      }
    }
    p.x = Math.round(p.x);
    p.y = Math.round(p.y);
    return new Phaser.Math.Vector2(p.x, p.y);
  },

  // 形成刀光点
  generateBlade(points) {
    const res = [];
    if (points.length <= 0) {
      return res;
    } else if (points.length === 1) {
      const oneLength = 6;
      res.push(new Phaser.Math.Vector2(points[0].x - oneLength, points[0].y));
      res.push(new Phaser.Math.Vector2(points[0].x, points[0].y - oneLength));
      res.push(new Phaser.Math.Vector2(points[0].x + oneLength, points[0].y));
      res.push(new Phaser.Math.Vector2(points[0].x, points[0].y + oneLength));
    } else {
      const tailLength = 10;
      const headLength = 20;
      const tailWidth = 1;
      const headWidth = 6;
      res.push(this.calcParallel(points[0], points[1], tailLength));

      for (let i = 0; i < points.length - 1; i++) {
        res.push(this.calcVertical(
          points[i + 1],
          points[i],
          Math.round((headWidth - tailWidth) * i / (points.length - 1) + tailWidth),
          true
        ));
      }

      res.push(this.calcVertical(
        points[points.length - 2],
        points[points.length - 1],
        headWidth,
        false
      ));

      res.push(this.calcParallel(
        points[points.length - 1],
        points[points.length - 2],
        headLength
      ));

      res.push(this.calcVertical(
        points[points.length - 2],
        points[points.length - 1],
        headWidth,
        true
      ));

      for (let i = points.length - 1; i > 0; i--) {
        res.push(this.calcVertical(
          points[i],
          points[i - 1],
          Math.round((headWidth - tailWidth) * (i - 1) / (points.length - 1) + tailWidth),
          false
        ));
      }
    }
    return res;
  },

  randomMinMax(min, max) {
    return Math.random() * (max - min) + min;
  },

  randomPosX() {
    return this.randomMinMax(-100, width + 100);
  },

  randomPosY() {
    //return this.randomMinMax(100, 200) + height;
    return this.randomMinMax(height - 100, height);
  },

  randomVelocityX(posX) {
    if (posX < 0) {
      return this.randomMinMax(100, 500);
    } else if (posX >= 0 && posX < width / 2) {
      return this.randomMinMax(0, 500);
    } else if (posX >= width / 2 && posX < width) {
      return this.randomMinMax(-500, 0);
    } else {
      return this.randomMinMax(-500, -100);
    }
  },

  randomVelocityY() {
    const myH = height - 480;
    return this.randomMinMax(-900 - myH, -850 - myH);
  },

  degCos(deg) {
    return Math.cos(deg * Math.PI / 180);
  },

  degSin(deg) {
    return Math.sin(deg * Math.PI / 180);
  },

  shuffle(o) {
    for (let j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
  }
};

// 炸弹类
class Bomb {
  constructor(envConfig) {
    this.env = envConfig;
    this.game = envConfig.scene;
    this.sprite = null;
    this.bombImage = null;
    this.bombSmoke = null;
    this.bombEmit = null;

    this.init();
  }

  init() {
    // 创建容器
    this.sprite = this.game.add.container(
      this.env.x || 0,
      this.env.y || 0
    );

    // 炸弹图像
    this.bombImage = this.game.add.sprite(0, 0, 'bomb');
    this.bombImage.setOrigin(0.5, 0.5);

    // 烟雾
    this.bombSmoke = this.game.add.sprite(-55, -55, 'smoke');

    // 创建粒子纹理
    const bitmap = this.game.make.graphics({ x: 0, y: 0, add: false });
    this.generateFlame(bitmap);
    const texture = bitmap.generateTexture('flameParticle', 50, 50);

    // 粒子发射器
    this.bombEmit = this.game.add.particles(0, 0, texture.key, {
      x: -30,
      y: -30,
      speed: { min: -100, max: 100 },
      scale: { start: 1, end: 0.8 },
      alpha: { start: 1, end: 0.1 },
      lifespan: 1500,
      frequency: 50,
      maxParticles: 20
    });

    // 添加到容器
    this.sprite.add([this.bombImage, this.bombEmit, this.bombSmoke]);

    // 物理属性
    this.game.physics.add.existing(this.sprite);
    this.sprite.body.setCollideWorldBounds(false);
  }

  generateFlame(bitmap) {
    const len = 5;
    bitmap.fillStyle(0xffffff);
    bitmap.beginPath();
    bitmap.moveTo(25 + len, 25 - len);
    bitmap.lineTo(25 + len, 25 + len);
    bitmap.lineTo(25 - len, 25 + len);
    bitmap.lineTo(25 - len, 25 - len);
    bitmap.closePath();
    bitmap.fill();
  }

  explode(onWhite, onComplete) {
    const lights = [];
    const startDeg = Math.floor(Math.random() * 360);

    // 保存外部this上下文
    const self = this;

    // 创建直射光芒效果
    const maxRays = 25; // 光芒数量
    const rayLength = 400; // 光芒长度
    const rayWidth = 200; // 光芒宽度

    for (let i = 0; i < maxRays; i++) {
      const angle = (i / maxRays) * Math.PI * 2; // 计算每个光芒的角度
      const light = self.game.add.graphics({
        x: self.sprite.x,
        y: self.sprite.y
      });

      // 设置初始透明度和颜色
      const alpha = 0.8 - (Math.random() * 0.3); // 随机透明度，增加自然感
      const hue = 45 - (Math.random() * 20); // 随机色调，从黄色到白色
      const color = Phaser.Display.Color.HSVToRGB(hue / 360, 0.8, 1).color;

      light.alpha = alpha;
      light.fillStyle(color, 1);

      // 创建细长三角形
      light.beginPath();
      light.moveTo(0, 0); // 起点在中心
      light.lineTo(
        Math.cos(angle) * rayLength,
        Math.sin(angle) * rayLength
      ); // 终点在外围
      light.lineTo(
        Math.cos(angle + Math.PI + 0.1) * (rayWidth / 2),
        Math.sin(angle + Math.PI + 0.1) * (rayWidth / 2)
      ); // 底部左点
      light.closePath();
      light.fill();

      light.setDepth(2000);
      lights.push(light);

      // 添加脉动动画效果
      self.game.tweens.add({
        targets: light,
        alpha: alpha * 0.5,
        duration: 800 + Math.random() * 400,
        yoyo: true,
        repeat: -1,
        ease: 'Sine.easeInOut'
      });
    }

    // 2. 打乱灯光顺序
    mathTool.shuffle(lights);

    // 3. 创建白屏元素
    const whiteScreen = self.game.add.graphics({
      x: 0,
      y: 0
    });
    whiteScreen.fillStyle(0xffffff, 0);
    whiteScreen.fillRect(0, 0, width, height);
    whiteScreen.setDepth(3000);
    whiteScreen.alpha = 0;

    // 4. 按顺序执行灯光动画
    function playChainAnimations(index) {
      if (index >= lights.length) {
        playWhiteScreenAnimation();
        return;
      }

      const light = lights[index];
      self.game.tweens.add({
        targets: light,
        alpha: { from: 0, to: 1, from: 0 },
        scale: { from: 1, to: 2 },
        duration: 50,
        onComplete: () => {
          light.destroy();
          playChainAnimations(index + 1);
        }
      });
    }

    function playWhiteScreenAnimation() {
      self.game.tweens.add({
        targets: whiteScreen,
        alpha: { from: 0, to: 1, to: 0 },
        duration: 50,
        onUpdate: (tween) => {
          if (tween.progress >= 0.25 && tween.progress <= 0.3) {
            onWhite();
          }
        },
        onComplete: () => {
          whiteScreen.destroy();
          if (typeof onComplete === 'function') {
            onComplete();
          }
        }
      });
    }

    // 开始执行第一个灯光动画
    playChainAnimations(0);
  }
  getSprite() {
    return this.sprite;
  }
}

// 水果类
class Fruit {
  constructor(envConfig) {
    this.env = envConfig;
    this.game = envConfig.scene;
    this.sprite = null;
    this.emitterMap = {
      "apple": 0xFFC3E925,
      "banana": 0xFFFFE337,
      "basaha": 0xFFEB2D13,
      "peach": 0xFFF8C928,
      "sandia": 0xFF739E0F
    };
    this.bitmap = null;
    this.emitter = null;
    this.halfOne = null;
    this.halfTwo = null;

    this.init();
  }

  init() {
    this.sprite = this.game.add.sprite(
      this.env.x || 0,
      this.env.y || 0,
      this.env.key
    );
    this.sprite.setOrigin(0.5, 0.5);

    // 物理属性
    this.game.physics.add.existing(this.sprite);
    this.sprite.body.setCollideWorldBounds(false);
    this.sprite.body.onWorldBounds = true;

    // 创建粒子纹理
    this.bitmap = this.game.make.graphics({ x: 0, y: 0, add: false });

    // 粒子发射器
    this.emitter = this.game.add.particles(0, 0, 'flameParticle', {
      visible: false // 初始隐藏
    });
  }

  // 水果类中的half方法
  half(deg, shouldEmit = false) {
    // 计算世界坐标
    const transform = this.sprite.getWorldTransformMatrix();
    const worldPos = new Phaser.Math.Vector2(
      transform.getX(0, 0),
      transform.getY(0, 0)
    );

    // 1. 计算切割方向的垂直向量（用于分离力）
    // 刀刃角度转弧度
    const rad = Phaser.Math.DegToRad(deg);
    // 垂直于刀刃的方向向量（单位向量）
    const sepX = Math.sin(rad); // 垂直方向X分量
    const sepY = -Math.cos(rad); // 垂直方向Y分量
    // 分离力度（可根据水果大小调整）
    const sepForce = 300;

    // 2. 创建第一半水果
    this.halfOne = this.game.add.sprite(worldPos.x, worldPos.y, this.sprite.texture.key + '-1');
    this.halfOne.setOrigin(0.5, 0.5);
    this.halfOne.rotation = Phaser.Math.DegToRad(deg + 45); // 初始角度与刀刃匹配
    this.game.physics.add.existing(this.halfOne);
    // 速度 = 原速度 + 分离速度（向一侧）
    this.halfOne.body.velocity.x = this.sprite.body.velocity.x + sepX * sepForce;
    this.halfOne.body.velocity.y = this.sprite.body.velocity.y + sepY * sepForce;
    this.halfOne.body.gravity.y = 2000;
    // 增加旋转（顺时针）
    this.halfOne.body.angularVelocity = 500; // 旋转速度（度/秒）
    this.halfOne.body.setCollideWorldBounds(false);
    this.halfOne.checkWorldBounds = true;
    this.halfOne.outOfBoundsKill = true;

    // 3. 创建第二半水果（分离方向相反）
    this.halfTwo = this.game.add.sprite(worldPos.x, worldPos.y, this.sprite.texture.key + '-2');
    this.halfTwo.setOrigin(0.5, 0.5);
    this.halfTwo.rotation = Phaser.Math.DegToRad(deg + 45);
    this.game.physics.add.existing(this.halfTwo);
    // 速度 = 原速度 - 分离速度（向另一侧）
    this.halfTwo.body.velocity.x = this.sprite.body.velocity.x - sepX * sepForce;
    this.halfTwo.body.velocity.y = this.sprite.body.velocity.y - sepY * sepForce;
    this.halfTwo.body.gravity.y = 2000;
    // 增加旋转（逆时针，与第一半相反）
    this.halfTwo.body.angularVelocity = -500;
    this.halfTwo.body.setCollideWorldBounds(false);
    this.halfTwo.checkWorldBounds = true;
    this.halfTwo.outOfBoundsKill = true;

    // 4. 原水果透明度渐变消失（替代直接销毁）
    this.game.tweens.add({
      targets: this.sprite,
      alpha: 0, // 透明度从1→0
      duration: 100, // 100ms内消失
      onComplete: () => {
        this.sprite.destroy();
      }
    });

    // 5. 优化粒子效果（沿分离方向飞溅）
    if (shouldEmit) {
      const emitColor = this.emitterMap[this.sprite.texture.key];
      this.generateFlame(this.bitmap, emitColor);
      const texture = this.bitmap.generateTexture('fruitParticle', 60, 60);
      // 粒子发射器：沿分离方向扩散
      this.emitter = this.game.add.particles(0, 0, texture.key, {
        x: worldPos.x,
        y: worldPos.y,
        // 速度方向：以分离方向为中心，±30度范围
        angle: {
          min: deg - 30,
          max: deg + 30
        },
        speed: { min: 100, max: 300 }, // 速度与分离力度匹配
        scale: { start: 0.8, end: 0.1 },
        alpha: { start: 1, end: 0.1 },
        lifespan: 600, // 延长粒子生命周期，增强视觉效果
        maxParticles: 15 // 增加粒子数量
      });
    }
  }

  generateFlame(bitmap, color) {
    // const len = 30;
    // bitmap.clear();

    // const rgb = Phaser.Display.Color.IntegerToRGB(color);
    // const radgrad = bitmap.context.createRadialGradient(len, len, 4, len, len, len);

    // radgrad.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);
    // radgrad.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);

    // bitmap.fillStyle(radgrad);
    // bitmap.fillRect(0, 0, 2 * len, 2 * len);
    const len = 30;
    bitmap.clear();

    // 将 16 进制颜色转换为 RGB 值（0-255 范围）
    const rgb = Phaser.Display.Color.IntegerToRGB(color);
    const r = rgb.r / 255; // 转换为 0-1 范围
    const g = rgb.g / 255;
    const b = rgb.b / 255;

    // 使用 Phaser 的径向渐变 API：fillGradientStyle
    // 参数说明：
    // 1. 渐变类型：1 表示径向渐变
    // 2-5. 内圆中心坐标 (x1, y1) 和半径 (r1)
    // 6-9. 外圆中心坐标 (x2, y2) 和半径 (r2)
    // 10-13. 内圆颜色（r, g, b, a）
    // 14-17. 外圆颜色（r, g, b, a）
    bitmap.fillGradientStyle(
      1, // 径向渐变
      len, len, 4, // 内圆：中心 (len, len)，半径 4
      len, len, len, // 外圆：中心 (len, len)，半径 len
      r, g, b, 1, // 内圆颜色（不透明）
      r, g, b, 0 // 外圆颜色（透明）
    );

    // 绘制矩形作为粒子纹理
    bitmap.fillRect(0, 0, 2 * len, 2 * len);
  }

  getSprite() {
    return this.sprite;
  }
}

// 刀身类
class Blade {
  constructor(envConfig) {
    this.env = envConfig;
    this.game = envConfig.scene;
    this.points = []; // 记录鼠标轨迹点
    this.graphics = null;
    this.POINTLIFETIME = 200; // 轨迹点的生命周期（毫秒）
    this.allowBlade = false;
    this.lastPoint = null; // 上一个记录的点
    this.moveThreshold = 5; // 鼠标移动超过这个距离才记录新点（避免密集冗余）

    this.init();
  }

  init() {
    this.graphics = this.game.add.graphics({
      x: 0,
      y: 0
    });
    // 监听鼠标移动事件（可选，也可在update中处理）
    this.game.input.on('pointermove', (pointer) => {
      console.log("11111",pointer)
      if (this.allowBlade) {
        this.handleMouseMove(pointer);
      }
    });
  }

  // 处理鼠标移动：记录轨迹点
  handleMouseMove(pointer) {
    const point = {
      x: pointer.x,
      y: pointer.y,
      time: Date.now()
    };

    if (!this.lastPoint) {
      // 首次记录点
      this.lastPoint = point;
      this.points.push(point);
    } else {
      // 计算与上一个点的距离，超过阈值才记录新点
      const dis = Math.hypot(
        point.x - this.lastPoint.x,
        point.y - this.lastPoint.y
      );
      if (dis > this.moveThreshold) {
        this.lastPoint = point;
        this.points.push(point);
      }
    }
  }

  update() {
    if (this.allowBlade) {
      this.graphics.clear();

      // 清理过期的轨迹点（超过生命周期的点）
      const now = Date.now();
      this.points = this.points.filter(point => now - point.time < this.POINTLIFETIME);

      // 生成刀光图形（基于现有轨迹点）
      if (this.points.length > 0) {
        const bladePoints = mathTool.generateBlade(this.points);
        if (bladePoints.length > 0) {
          this.graphics.fillStyle(0xffffff, 0.8);
          this.graphics.beginPath();
          this.graphics.moveTo(bladePoints[0].x, bladePoints[0].y);
          bladePoints.forEach((point, i) => {
            if (i > 0) {
              this.graphics.lineTo(point.x, point.y);
            }
          });
          this.graphics.closePath();
          this.graphics.fill();
        }
      }
    }
  }

  // 碰撞检测：去掉“鼠标按下”的限制，只要有轨迹就检测
  checkCollide(sprite, onCollide) {
    if (this.allowBlade && this.points.length > 2) { // 仅保留轨迹点数量的判断
      const bounds = sprite.getBounds();
      for (const point of this.points) {
        if (Phaser.Geom.Rectangle.Contains(bounds, point.x, point.y)) {
          onCollide();
          break;
        }
      }
    }
  }

  collideDeg() {
    let deg = 0;
    const len = this.points.length;

    if (len >= 2) {
      const p0 = this.points[0];
      const p1 = this.points[len - 1];

      if (p0.x === p1.x) {
        deg = 90;
      } else {
        const val = (p0.y - p1.y) / (p0.x - p1.x);
        deg = Math.round(Math.atan(val) * 180 / Math.PI);
      }

      if (deg < 0) {
        deg += 180;
      }
    }

    return deg;
  }

  enable() {
    this.allowBlade = true;
  }
}

// 启动场景
class BootScene extends Phaser.Scene {
  constructor() {
    super('boot');
  }

  preload() {
    this.load.image('loading', 'static/images/fruit/preloader.gif');
  }

  create() {
    this.scene.start('preload');
  }
}

// 预加载场景
class PreloadScene extends Phaser.Scene {
  constructor() {
    super('preload');
  }

  preload() {
    this.add.sprite(10, height / 2, 'loading').setPosition((width) / 2, height / 2);
    this.load.on('progress', (value) => {
      console.log("进度", value)
    });
    // 加载游戏资源
    this.load.image('apple', 'static/images/fruit/apple.png');
    this.load.image('apple-1', 'static/images/fruit/apple-1.png');
    this.load.image('apple-2', 'static/images/fruit/apple-2.png');
    this.load.image('background', 'static/images/fruit/background.jpg');
    this.load.image('banana', 'static/images/fruit/banana.png');
    this.load.image('banana-1', 'static/images/fruit/banana-1.png');
    this.load.image('banana-2', 'static/images/fruit/banana-2.png');
    this.load.image('basaha', 'static/images/fruit/basaha.png');
    this.load.image('basaha-1', 'static/images/fruit/basaha-1.png');
    this.load.image('basaha-2', 'static/images/fruit/basaha-2.png');
    this.load.image('best', 'static/images/fruit/best.png');
    this.load.image('bomb', 'static/images/fruit/bomb.png');
    this.load.image('dojo', 'static/images/fruit/dojo.png');
    this.load.image('game-over', 'static/images/fruit/game-over.png');
    this.load.image('home-desc', 'static/images/fruit/home-desc.png');
    this.load.image('home-mask', 'static/images/fruit/home-mask.png');
    this.load.image('logo', 'static/images/fruit/logo.png');
    this.load.image('lose', 'static/images/fruit/lose.png');
    this.load.image('new-game', 'static/images/fruit/new-game.png');
    this.load.image('peach', 'static/images/fruit/peach.png');
    this.load.image('peach-1', 'static/images/fruit/peach-1.png');
    this.load.image('peach-2', 'static/images/fruit/peach-2.png');
    this.load.image('quit', 'static/images/fruit/quit.png');
    this.load.image('sandia', 'static/images/fruit/sandia.png');
    this.load.image('sandia-1', 'static/images/fruit/sandia-1.png');
    this.load.image('sandia-2', 'static/images/fruit/sandia-2.png');
    this.load.image('score', 'static/images/fruit/score.png');
    this.load.image('shadow', 'static/images/fruit/shadow.png');
    this.load.image('smoke', 'static/images/fruit/smoke.png');
    this.load.image('x', 'static/images/fruit/x.png');
    this.load.image('xf', 'static/images/fruit/xf.png');
    this.load.image('xx', 'static/images/fruit/xx.png');
    this.load.image('xxf', 'static/images/fruit/xxf.png');
    this.load.image('xxx', 'static/images/fruit/xxx.png');
    this.load.image('xxxf', 'static/images/fruit/xxxf.png');
    this.load.bitmapFont('number', 'static/images/fruit/bitmapFont.png', 'static/images/fruit/bitmapFont.xml');
  }

  create() {
    this.scene.start('main');
  }
}

// 主场景
class MainScene extends Phaser.Scene {
  constructor() {
    super('main');
    this.bg = null;
    this.blade = null;
    this.homeGroup = null;
    this.home_mask = null;
    this.logo = null;
    this.home_desc = null;
    this.sandiaGroup = null;
    this.new_game = null;
    this.sandia = null;
    this.lose = null;
    this.start = false;
    this.sandiaRotateSpeed = 0.9;
    this.newGameRotateSpeed = -0.3;
  }

  create() {
    // 初始化物理系统
    this.physics.world.gravity.y = 0;

    // 背景
    this.bg = this.add.image(0, 0, "background");
    this.bg.setScale(wRatio, hRatio);
    this.bg.setPosition(width / 2, height / 2);
    this.bg.setOrigin(0.5, 0.5);

    // 刀光
    this.blade = new Blade({
      scene: this
    });

    // 开始动画
    this.homeGroupAnim();
  }

  update() {
    this.updateRotate();

    // 检查是否该跳转到游戏场景
    // if (this.start) {
    //   this.gotoNextScene();
    // }

    // 更新刀光
    this.blade.update();

    // 检查水果碰撞
    if (this.sandia && this.sandia.getSprite() && this.sandia.getSprite().active && !this.start) {
      this.blade.checkCollide(
        this.sandia.getSprite(),
        () => {
          this.startGame();
        }
      );
    }
  }

  homeGroupAnim() {
    //创建组合默认先隐藏
    this.homeGroup = this.add.container(0, -height);
    //背景蒙版
    // this.home_mask = this.add.image(0, 0, "home-mask");
    // this.home_mask.setOrigin(0, 0);
    // this.home_mask.setScale(wRatio);
    // this.home_mask.y = -200;
    
    //logo
    this.logo = this.add.image(20, 50, "logo");
    this.logo.setOrigin(0, 0);
    //提示语
    this.home_desc = this.add.image(0, 0, "home-desc");
    this.home_desc.setPosition((width - this.home_desc.width / 2) - 20, 70);
    //合并图层
    //this.homeGroup.add([this.home_mask, this.logo, this.home_desc]);
    this.homeGroup.add([this.logo, this.home_desc]);
    // 退出按钮
    this.lose = this.add.image(0, 0, "lose");
    this.lose.setPosition(width - this.lose.width - 30, height - this.lose.height - 30);
    this.lose.setInteractive();
    // 绑定点击事件
    this.lose.on('pointerdown', () => this.getExit());
    //动画效果，接着展示西瓜
    this.tweens.add({
      targets: this.homeGroup,
      y: 0,
      duration: 400,
      ease: 'Sine.InOut',
      onComplete: () => this.fruitAnim()
    });
  }

  fruitAnim() {
    // 每次创建全新的容器，避免复用旧实例
    this.sandiaGroup = this.add.container(0, 0); // 先置0，后续重新计算
    // 西瓜组初始位置：基于当前窗口尺寸动态计算（核心修复）
    this.sandiaGroup.setPosition(width / 2, height / 2); // 强制设置位置
    //圆圈
    this.new_game = this.add.sprite(0, 0, "new-game");
    this.new_game.setOrigin(0.5, 0.5);
    //西瓜
    this.sandia = new Fruit({ scene: this, key: "sandia" });
    this.sandiaGroup.add([this.new_game, this.sandia.getSprite()]);
    //动画效果，接着开放鼠标事件
    this.tweens.add({
      targets: this.sandiaGroup,
      scale: 1,
      duration: 500,
      ease: 'Linear.None',
      onComplete: () => this.allowBlade()
    });
  }

  updateRotate() {
    //西瓜外框圆圈图片旋转
    if (this.new_game) {
      this.new_game.rotation += this.newGameRotateSpeed * 0.016;
    }
    if (this.sandia && this.sandia.getSprite()) {
      this.sandia.getSprite().rotation += this.sandiaRotateSpeed * 0.016;
    }
  }

  allowBlade() {
    this.blade.enable();
  }

  startGame() {
    // this.start = true;

    // // 隐藏主界面元素
    // this.tweens.add({
    //   targets: this.homeGroup,
    //   y: -height,
    //   duration: 200,
    //   ease: 'Sine.InOut'
    // });

    // // 隐藏按钮
    // this.new_game.destroy();
    // this.lose.destroy();
    // // 切开西瓜
    // const deg = this.blade.collideDeg();
    // this.sandia.half(deg);


    this.start = true; // 先禁用立即切换
    const deg = this.blade.collideDeg();
    this.sandia.half(deg); // 切开西瓜，生成两半

    // 延迟1秒（1000ms）后再切换场景，等待动画展示
    setTimeout(() => {
      this.gotoNextScene();
    }, 1000);
  }

  gotoNextScene() {
    this.resetScene();
    this.scene.start("play");
  }

  getExit() {
    console.log("退出");
    router.push({ path: '/game' });
  }

  resetScene() {
    this.sandia = null;
    this.start = false;
    // 新增：销毁西瓜容器，避免残留
    if (this.sandiaGroup) {
      this.sandiaGroup.destroy(); // 销毁容器及其子元素
      this.sandiaGroup = null; // 置空引用
    }
  }
}

// 游戏场景
class PlayScene extends Phaser.Scene {
  constructor() {
    super('play');
    this.bg = null;
    this.blade = null;
    this.fruits = [];
    this.score = 0;
    this.playing = false; // 改为false，在初始化方法中设置为true
    this.bombExplode = false;
    this.lostCount = 0;
    this.scoreImage = null;
    this.best = null;
    this.scoreText = null;
    this.xxxGroup = null;
    this.x = null;
    this.xx = null;
    this.xxx = null;
    this.gravity = 600;
  }

  create() {
    // 物理系统
    this.physics.world.gravity.y = this.gravity;

    // 背景
    // this.bg = this.add.image(0, 0, 'background');
    // this.bg.setScale(wRatio, hRatio);
    // this.bg.setPosition(width / 2, height / 2);
    // this.bg.setOrigin(0, 0);
    this.bg = this.add.image(0, 0, "background");
    // 设置背景图铺满整个游戏区域
    this.bg.displayWidth = width;
    this.bg.displayHeight = height;
    // 设置背景图原点为左上角
    this.bg.setOrigin(0, 0);

    // 刀光
    this.blade = new Blade({
      scene: this
    });
    this.blade.enable();

    // 初始化UI
    this.scoreAnim();
    this.scoreTextAnim();
    this.bestAnim();
    this.xxxAnim();

    // 添加调试信息
    console.log("PlayScene created");

    // 调用初始化方法，而不是直接开始生成水果
    this.initGame();
  }

  initGame() {
    // 重置游戏状态
    this.fruits = [];
    this.score = 0;
    this.lostCount = 0;
    this.bombExplode = false;
    this.scoreText.setText(this.score.toString());

    // 重置失去计数UI
    if (this.xxxGroup) {
      this.xxxGroup.removeAll(true);
      this.x = this.add.image(0, 0, 'x');
      this.xx = this.add.image(22, 0, 'xx');
      this.xxx = this.add.image(49, 0, 'xxx');
      this.x.setOrigin(0, 0);
      this.xx.setOrigin(0, 0);
      this.xxx.setOrigin(0, 0);
      this.xxxGroup.add([this.x, this.xx, this.xxx]);
    }

    // 开始游戏
    this.playing = true;
    console.log("Game initialized and started");

    // 延迟一点时间再生成第一个水果，让玩家有准备
    this.time.delayedCall(1000, () => {
      this.startFruit();
      console.log("First fruit spawned");
    });
  }

  update() {
    // 如果游戏未开始，不执行任何操作
    if (!this.playing) return;

    // 检查是否有水果出界
    if (!this.bombExplode) {
      for (let i = this.fruits.length - 1; i >= 0; i--) {
        const fruit = this.fruits[i];
        const sprite = fruit.getSprite();

        if (sprite && !sprite.active) continue;

        if (sprite && (
          sprite.y > height + 100 ||
          sprite.x < -100 ||
          sprite.x > width + 100
        )) {
          if (fruit.isFruit) {
            this.onOut(fruit);
          }
          sprite.destroy();
          this.fruits.splice(i, 1);
        }
      }
    }

    // 如果没有水果且游戏进行中，生成新水果
    if (this.playing && this.fruits.length === 0 && !this.bombExplode) {
      this.startFruit();
    }

    // 更新刀光
    this.blade.update();

    // 检查碰撞
    if (!this.bombExplode) {
      this.fruits.forEach((fruit, i) => {
        if (fruit.getSprite() && fruit.getSprite().active) {
          this.blade.checkCollide(
            fruit.getSprite(),
            () => {
              if (fruit.isFruit) {
                this.onKill(fruit);
                this.fruits.splice(i, 1);
              } else {
                this.onBomb(fruit);
              }
            }
          );
        }
      });
    }
  }

  scoreAnim() {
    this.scoreImage = this.add.image(-100, 8, 'score');
    this.scoreImage.setOrigin(0, 0);
    this.tweens.add({
      targets: this.scoreImage,
      x: 8,
      duration: 300,
      ease: 'Sine.InOut'
    });
  }

  bestAnim() {
    this.best = this.add.image(-100, 52, 'best');
    this.best.setOrigin(0, 0);
    this.tweens.add({
      targets: this.best,
      x: 5,
      duration: 300,
      ease: 'Sine.InOut'
    });
  }

  scoreTextAnim() {
    this.scoreText = this.add.bitmapText(-100, 40, 'number', this.score.toString(), 32);
    this.scoreText.setOrigin(0, 0);
    this.tweens.add({
      targets: this.scoreText,
      x: 75,
      duration: 300,
      ease: 'Sine.InOut'
    });
  }

  xxxAnim() {
    this.xxxGroup = this.add.container(width + 100, 5);

    this.x = this.add.image(0, 0, 'x');
    this.xx = this.add.image(22, 0, 'xx');
    this.xxx = this.add.image(49, 0, 'xxx');

    this.xxxGroup.add([this.x, this.xx, this.xxx]);

    this.tweens.add({
      targets: this.xxxGroup,
      x: width - 86,
      duration: 300,
      ease: 'Sine.InOut'
    });
  }

  startFruit() {

    const number = Math.floor(mathTool.randomMinMax(1, 3));
    const hasBomb = Math.random() > 0.9; // 炸弹概率
    const bombIndex = hasBomb ? Math.floor(Math.random() * number) : -1;

    for (let i = 0; i < number; i++) {
      if (i === bombIndex) {
        this.fruits.push(this.randomFruit(false));
      } else {
        this.fruits.push(this.randomFruit(true));
      }
    }
  }

  randomFruit(isFruit) {
    const fruitArray = ["apple", "banana", "basaha", "peach", "sandia"];
    const index = Math.floor(Math.random() * fruitArray.length);
    const x = mathTool.randomPosX();
    const y = mathTool.randomPosY();
    const vx = mathTool.randomVelocityX(x);
    const vy = mathTool.randomVelocityY();

    let fruit;
    if (isFruit) {
      fruit = new Fruit({
        scene: this,
        key: fruitArray[index],
        x: x,
        y: y
      });
    } else {
      fruit = new Bomb({
        scene: this,
        x: x,
        y: y
      });
    }
    console.log("isFruitisFruitisFruit", isFruit)
    fruit.isFruit = isFruit;
    const sprite = fruit.getSprite();

    if (sprite.body) {
      sprite.body.velocity.x = vx;
      sprite.body.velocity.y = vy;
      sprite.body.gravity.y = this.gravity;
    }

    return fruit;
  }

  onOut(fruit) {
    const sprite = fruit.getSprite();
    let x, y;

    // 确定失去标记的位置
    if (sprite.y > height) {
      x = sprite.x;
      y = height - 30;
    } else if (sprite.x < 0) {
      x = 30;
      y = sprite.y;
    } else {
      x = width - 30;
      y = sprite.y;
    }

    // 创建失去标记动画
    const lose = this.add.sprite(x, y, 'lose');
    lose.setOrigin(0.5, 0.5);
    lose.setScale(0);

    const tweenShow = this.tweens.add({
      targets: lose,
      scale: 1,
      duration: 300,
      ease: 'Sine.InOut',
      paused: true
    });

    const tweenHide = this.tweens.add({
      targets: lose,
      scale: 0,
      duration: 300,
      ease: 'Sine.InOut',
      paused: true,
      delay: 1000
    });

    this.tweens.chain({
      targets: lose,
      tweens: [
        {
          scale: 1,
          duration: 300,
          ease: 'Sine.InOut'
        },
        {
          scale: 0,
          duration: 300,
          ease: 'Sine.InOut',
          delay: 1000,
          onComplete: () => {
            lose.destroy();
          }
        }
      ]
    });
    tweenShow.play();

    tweenHide.on('complete', () => {
      lose.destroy();
    });

    this.lostCount++;
    this.loseCount();
  }

  onKill(fruit) {
    const deg = this.blade.collideDeg();
    fruit.half(deg, true);
    this.score++;
    this.scoreText.setText(this.score.toString());
  }

  onBomb(bomb) {
    this.bombExplode = true;

    // 屏幕震动效果
    this.shakeScreen();

    // 停止所有水果的物理运动
    this.fruits.forEach(fruit => {
      if (fruit.getSprite() && fruit.getSprite().body) {
        fruit.getSprite().body.setVelocity(0);
        fruit.getSprite().body.setGravity(0);
      }
    });

    // 炸弹爆炸
    bomb.explode(
      () => {
        // 白屏显示时的回调：销毁所有水果
        this.fruits.forEach(fruit => {
          if (fruit.getSprite()) {
            fruit.getSprite().destroy();
          }
        });
        this.fruits = [];
      },
      () => {
        // 爆炸完成后的回调
        this.gameOver();
      }
    );
  }

  // 添加屏幕震动方法
  shakeScreen() {
    // 获取主相机
    const camera = this.cameras.main;

    // 保存相机初始位置
    const startX = camera.x;
    const startY = camera.y;

    // 震动持续时间(ms)
    const duration = 500;
    // 震动强度
    const intensity = 8;
    // 震动频率控制
    const frequency = 20;

    // 计算震动次数
    const shakes = duration / frequency;
    let shakeCount = 0;

    // 创建震动定时器
    const shakeInterval = setInterval(() => {
      if (shakeCount < shakes) {
        // 随机生成震动偏移量
        const offsetX = Phaser.Math.Between(-intensity, intensity);
        const offsetY = Phaser.Math.Between(-intensity, intensity);

        // 应用震动
        camera.setPosition(startX + offsetX, startY + offsetY);
        shakeCount++;
      } else {
        // 震动结束，恢复相机位置
        clearInterval(shakeInterval);
        camera.setPosition(startX, startY);
      }
    }, frequency);
  }

  loseCount() {
    if (this.lostCount === 1) {
      this.lostAnim(this.x, 'xf');
    } else if (this.lostCount === 2) {
      this.lostAnim(this.xx, 'xxf');
    } else if (this.lostCount >= 3) {
      this.lostAnim(this.xxx, 'xxxf');
      this.gameOver();
    }
  }

  lostAnim(removeObj, addKey) {
    removeObj.destroy();
    const newObj = this.add.sprite(removeObj.x, removeObj.y, addKey);
    newObj.setOrigin(0, 0);
    newObj.setScale(0);
    this.xxxGroup.add(newObj);

    this.tweens.add({
      targets: newObj,
      scale: 1,
      duration: 300,
      ease: 'Sine.InOut'
    });
  }

  gameOver() {
    this.playing = false;

    // 1. 确保所有其他元素停止更新，避免干扰
    this.blade.allowBlade = false; // 禁用刀光

    // 2. 创建game-over图片，并设置最高层级
    const gameOverSprite = this.add.sprite(width / 2, height / 2, 'game-over');
    gameOverSprite.setOrigin(0.5, 0.5);
    gameOverSprite.setScale(0);
    gameOverSprite.setDepth(1000); // 设置最高层级，确保不被覆盖

    // 3. 优化入场动画，确保平滑显示
    this.tweens.add({
      targets: gameOverSprite,
      scale: 1,
      duration: 500, // 延长动画时间，确保可见
      ease: 'Elastic.Out', // 更明显的弹性动画，增强视觉效果
      onComplete: () => {
        // 动画完成后再设置自动返回，确保用户有足够时间看到画面
        setTimeout(() => {
          console.log('游戏结束，返回首页');
          this.scene.start('main');
        }, 1000); // 延长至3秒，给用户足够时间观察
      }
    });

    // 4. 支持点击立即返回，提升交互体验
    gameOverSprite.setInteractive();
    gameOverSprite.on('pointerdown', () => {
      console.log('点击返回首页');
      this.scene.start('main');
    });
  }
}


// 初始化游戏
onMounted(() => {
  // 获取容器尺寸
  const container = document.getElementById('game');
  // 初始化工具类
  mathTool.init();

  // 创建游戏实例
  game = new Phaser.Game({
    type: Phaser.CANVAS,
    width: width,
    height: height,
    parent: 'game',
    scene: [BootScene, PreloadScene, MainScene, PlayScene],
    physics: {
      default: 'arcade',
      arcade: {
        debug: false
      }
    }
  });
});
</script>

<style lang="scss" scoped></style>