Browse Source

日常开发

林旭祥 2 days ago
parent
commit
9dd53a3a67
1 changed files with 95 additions and 52 deletions
  1. 95 52
      src/views/game/fruit.vue

+ 95 - 52
src/views/game/fruit.vue

@@ -260,71 +260,114 @@ class Bomb {
 
   explode(onWhite, onComplete) {
     const lights = [];
-    const startDeg = Math.floor(Math.random() * 360); // 随机初始角度(备用)
+    const startDeg = Math.floor(Math.random() * 360);
 
-    // 1. 创建8个灯光图形(爆炸扩散效果)
-    for (let i = 0; i < 8; i++) {
-      const light = this.game.add.graphics({
-        x: this.sprite.x, // 基于炸弹位置定位
-        y: this.sprite.y
+    // 保存外部this上下文
+    const self = this;
+
+    // 创建直射光芒效果
+    const maxRays = 25; // 光芒数量
+    const rayLength = 200; // 光芒长度
+    const rayWidth = 140; // 光芒宽度
+
+    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
       });
-      light.fillStyle(0xffffff, 0); // 初始透明
+
+      // 设置初始透明度和颜色
+      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.arc(0, 0, 15 + i * 10, 0, Math.PI * 2); // 半径递增的圆形灯光
+      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); // 确保在其他元素上方
+
+      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. 打乱灯光顺序(与动画顺序匹配)
+    // 2. 打乱灯光顺序
     mathTool.shuffle(lights);
 
-    // 3. 构建链式动画配置(每个灯光的闪烁动画)
-    const tweenConfigs = lights.map(light => ({
-      targets: light,
-      alpha: { value: [0, 1, 0], duration: 500 }, // 淡入淡出
-      scale: { value: 2, duration: 500 }, // 缩放扩散
-      onComplete: () => {
-        light.destroy(); // 单个灯光动画结束后销毁
+    // 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;
       }
-    }));
 
-    // 4. 执行链式动画(按打乱后的顺序播放灯光效果)
-    this.game.tweens.chain({
-      tweens: tweenConfigs,
-      onComplete: () => {
-        // 5. 所有灯光动画结束后,执行白屏效果
-        const whiteScreen = this.game.add.graphics({
-          x: 0,
-          y: 0,
-          fillStyle: { color: 0xffffff, alpha: 0 }
-        });
-        whiteScreen.fillRect(0, 0, width, height); // 覆盖全屏
-        whiteScreen.setDepth(3000); // 确保在最上层
-
-        // 白屏动画:淡入后淡出
-        this.game.tweens.add({
-          targets: whiteScreen,
-          alpha: { value: [0, 1, 0], duration: 400 }, // 100ms淡入 + 300ms淡出
-          onUpdate: (tween) => {
-            // 白屏峰值时触发onWhite回调(替代原分步逻辑)
-            if (tween.progress >= 0.25 && tween.progress <= 0.3) {
-              onWhite(); // 白屏最亮时执行(原逻辑中的"白屏显示时")
-            }
-          },
-          onComplete: () => {
-            whiteScreen.destroy();
-            // 确保回调有效后执行
-            if (typeof onComplete === 'function') {
-              onComplete();
-            }
+      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;
   }
@@ -1295,7 +1338,7 @@ class PlayScene extends Phaser.Scene {
         setTimeout(() => {
           console.log('游戏结束,返回首页');
           this.scene.start('main');
-        }, 3000); // 延长至3秒,给用户足够时间观察
+        }, 1000); // 延长至3秒,给用户足够时间观察
       }
     });