Ver Fonte

日常开发

林旭祥 há 1 mês atrás
pai
commit
8d35fad7b8
1 ficheiros alterados com 93 adições e 87 exclusões
  1. 93 87
      src/views/game/fruit.vue

+ 93 - 87
src/views/game/fruit.vue

@@ -160,7 +160,7 @@ const mathTool = {
 
   randomPosY() {
     //return this.randomMinMax(100, 200) + height;
-    return this.randomMinMax(height - 100, height); 
+    return this.randomMinMax(height - 100, height);
   },
 
   randomVelocityX(posX) {
@@ -259,62 +259,62 @@ class Bomb {
   }
 
   explode(onWhite, onComplete) {
-  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
-    });
-
-    // 省略灯光绘制代码...
-
-    lights.push(light);
-
-    const tween = this.game.tweens.add({
-      targets: light,
-      alpha: 1,
-      duration: 100,
-      paused: true
-    });
-
-    tweens.push(tween);
-  }
+    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);
+      // 省略灯光绘制代码...
 
-  // 使用 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);
+      lights.push(light);
 
-      this.game.tweens.add({
-        targets: whiteScreen,
+      const tween = this.game.tweens.add({
+        targets: light,
         alpha: 1,
         duration: 100,
-        onComplete: () => {
-          onWhite();
-          lights.forEach(light => light.destroy());
-          
-          // 添加延迟确保视觉效果完成
-          this.game.time.delayedCall(300, () => {
-            whiteScreen.destroy();
-            onComplete();
-          });
-        }
+        paused: true
       });
+
+      tweens.push(tween);
     }
-  });
 
-  tweens[0].play();
+    mathTool.shuffle(lights);
+
+    // 使用 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);
+
+        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();
+            });
+          }
+        });
+      }
+    });
+
+    tweens[0].play();
   }
 
   getSprite() {
@@ -442,32 +442,32 @@ class Fruit {
 
     // 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);
+    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() {
@@ -857,9 +857,15 @@ class PlayScene extends Phaser.Scene {
     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 = 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);
 
     // 刀光
@@ -873,14 +879,14 @@ class PlayScene extends Phaser.Scene {
     this.scoreTextAnim();
     this.bestAnim();
     this.xxxAnim();
-    
+
     // 添加调试信息
     console.log("PlayScene created");
-    
+
     // 调用初始化方法,而不是直接开始生成水果
     this.initGame();
   }
-  
+
   initGame() {
     // 重置游戏状态
     this.fruits = [];
@@ -888,7 +894,7 @@ class PlayScene extends Phaser.Scene {
     this.lostCount = 0;
     this.bombExplode = false;
     this.scoreText.setText(this.score.toString());
-    
+
     // 重置失去计数UI
     if (this.xxxGroup) {
       this.xxxGroup.removeAll(true);
@@ -897,11 +903,11 @@ class PlayScene extends Phaser.Scene {
       this.xxx = this.add.image(49, 0, 'xxx');
       this.xxxGroup.add([this.x, this.xx, this.xxx]);
     }
-    
+
     // 开始游戏
     this.playing = true;
     console.log("Game initialized and started");
-    
+
     // 延迟一点时间再生成第一个水果,让玩家有准备
     this.time.delayedCall(1000, () => {
       this.startFruit();
@@ -912,7 +918,7 @@ class PlayScene extends Phaser.Scene {
   update() {
     // 如果游戏未开始,不执行任何操作
     if (!this.playing) return;
-    
+
     // 检查是否有水果出界
     if (!this.bombExplode) {
       for (let i = this.fruits.length - 1; i >= 0; i--) {
@@ -1203,9 +1209,9 @@ class PlayScene extends Phaser.Scene {
       duration: 300,
       ease: 'Sine.InOut'
     });
-    setTimeout(()=>{
+    setTimeout(() => {
       this.scene.start('main');
-    },2000)
+    }, 2000)
 
     // 点击重新开始
     // this.input.once('pointerup', () => {