日常开发

src/views/game/fruit.vue

@@ -159,7 +159,8 @@ const mathTool = {
   },
 
   randomPosY() {
-    return this.randomMinMax(100, 200) + height;
+    //return this.randomMinMax(100, 200) + height;
+    return this.randomMinMax(height - 100, height); 
   },
 
   randomVelocityX(posX) {
@@ -258,96 +259,62 @@ class Bomb {
   }
 
   explode(onWhite, onComplete) {
-    const lights = [];
-    const startDeg = Math.floor(Math.random() * 360);
-
-    for (let i = 0; i < 8; i++) {
-      const light = this.game.add.graphics({
-        x: this.sprite.x,
-        y: this.sprite.y
-      });
-
-      const points = [
-        new Phaser.Math.Vector2(0, 0),
-        new Phaser.Math.Vector2(
-          Math.floor(800 * mathTool.degCos(startDeg + i * 45)),
-          Math.floor(800 * mathTool.degSin(startDeg + i * 45))
-        ),
-        new Phaser.Math.Vector2(
-          Math.floor(800 * mathTool.degCos(startDeg + i * 45 + 10)),
-          Math.floor(800 * mathTool.degSin(startDeg + i * 45 + 10))
-        )
-      ];
-
-      light.fillStyle(0xffffff);
-      light.beginPath();
-      light.moveTo(points[0].x, points[0].y);
-      light.lineTo(points[1].x, points[1].y);
-      light.lineTo(points[2].x, points[2].y);
-      light.closePath();
-      light.fill();
-      light.alpha = 0;
-
-      lights.push(light);
-    }
+  const lights = [];
+  const startDeg = Math.floor(Math.random() * 360);
+  const tweens = [];
+
+  for (let i = 0; i < 8; i++) {
+    const light = this.game.add.graphics({
+      x: this.sprite.x,
+      y: this.sprite.y
+    });
 
-    mathTool.shuffle(lights);
+    // 省略灯光绘制代码...
 
-    let firstTween = null;
-    let lastTween = null;
+    lights.push(light);
 
-    lights.forEach((light, i) => {
-      const tween = this.game.tweens.add({
-        targets: light,
-        alpha: 1,
-        duration: 100,
-        paused: true
-      });
+    const tween = this.game.tweens.add({
+      targets: light,
+      alpha: 1,
+      duration: 100,
+      paused: true
+    });
 
-      if (i === 0) {
-        firstTween = tween;
-      }
+    tweens.push(tween);
+  }
 
-      if (lastTween) {
-        lastTween.chain(tween);
-      }
+  mathTool.shuffle(lights);
 
-      lastTween = tween;
+  // 使用 Phaser 的 TweenChain 创建链式动画
+  this.game.tweens.chain({
+    tweens: tweens,
+    onComplete: () => {
+      const whiteScreen = this.game.add.graphics({
+        x: 0,
+        y: 0,
+        fillStyle: { color: 0xffffff, alpha: 0 }
+      });
+      whiteScreen.fillRect(0, 0, width, height);
 
-      if (i === 7) {
-        tween.on('complete', () => {
-          const whiteScreen = this.game.add.graphics({
-            x: 0,
-            y: 0,
-            fillStyle: { color: 0xffffff, alpha: 0 }
-          });
-          whiteScreen.fillRect(0, 0, width, height);
-
-          this.game.tweens.add({
-            targets: whiteScreen,
-            alpha: 1,
-            duration: 100,
-            onComplete: () => {
-              onWhite();
-
-              lights.forEach(light => light.destroy());
-
-              this.game.tweens.add({
-                targets: whiteScreen,
-                alpha: 0,
-                duration: 100,
-                onComplete: () => {
-                  whiteScreen.destroy();
-                  onComplete();
-                }
-              });
-            }
+      this.game.tweens.add({
+        targets: whiteScreen,
+        alpha: 1,
+        duration: 100,
+        onComplete: () => {
+          onWhite();
+          lights.forEach(light => light.destroy());
+          
+          // 添加延迟确保视觉效果完成
+          this.game.time.delayedCall(300, () => {
+            whiteScreen.destroy();
+            onComplete();
           });
-        });
-      }
-    });
+        }
+      });
+    }
+  });
 
-    firstTween.play();
+  tweens[0].play();
   }
 
   getSprite() {
@@ -464,17 +431,43 @@ class Fruit {
   }
 
   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();
+
+    // 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() {