日常开发

src/views/game/football.vue

@@ -71,48 +71,55 @@ const game = ref(null);
 const gameConfig = ref(null);
 
 // 游戏常量
-const GAME_WIDTH = 320;
-const GAME_HEIGHT = 480;
+const width = document.documentElement.clientWidth;
+const height = document.documentElement.clientHeight;
+const GAME_WIDTH = width;
+const GAME_HEIGHT = height;
 
 // 游戏资源
 const gameAssets = {
   images: [
-    { key: 'gameStart', url: '/static/images/football/game_start.jpg' },
-    { key: 'grass', url: '/static/images/football/Caopi.png' },
-    { key: 'player', url: '/static/images/football/Qiuyuan.png' },
-    { key: 'playerSuper', url: '/static/images/football/QiuyuanSuper.png' },
-    { key: 'playerShoot', url: '/static/images/football/QiuyuanShooting.png' },
-    { key: 'playerCollision', url: '/static/images/football/QiuyuanCollision.png' },
-    { key: 'pile', url: '/static/images/football/Pile.png' },
-    { key: 'jersey', url: '/static/images/football/Jersey.png' },
-    { key: 'broom', url: '/static/images/football/Broom.png' },
-    { key: 'goalkeeper', url: '/static/images/football/Goalkeeper.png' },
-    { key: 'goal', url: '/static/images/football/Goal.png' },
-    { key: 'ball', url: '/static/images/football/Ball.png' },
-    { key: 'line', url: '/static/images/football/Line.png' },
-    { key: 'line2', url: '/static/images/football/Line2.png' },
-    { key: 'goalBackground', url: '/static/images/football/GoalBackGround.png' },
-    { key: 'gameOver', url: '/static/images/football/Gameover.png' }
+    { key: 'gameStart', url: 'static/images/football/game_start.jpg' },
+    { key: 'grass', url: 'static/images/football/Caopi.png' },
+    { key: 'player', url: 'static/images/football/Qiuyuan.png' },
+    { key: 'playerSuper', url: 'static/images/football/QiuyuanSuper.png' },
+    { key: 'playerShoot', url: 'static/images/football/QiuyuanShooting.png' },
+    { key: 'pile', url: 'static/images/football/Pile.png' },
+    { key: 'jersey', url: 'static/images/football/Jersey.png' },
+    { key: 'broom', url: 'static/images/football/Broom.png' },
+    { key: 'goalkeeper', url: 'static/images/football/Goalkeeper.png' },
+    { key: 'goal', url: 'static/images/football/Goal.png' },
+    { key: 'ball', url: 'static/images/football/Ball.png' },
+    { key: 'line', url: 'static/images/football/Line.png' },
+    { key: 'line2', url: 'static/images/football/Line2.png' },
+    { key: 'goalBackground', url: 'static/images/football/GoalBackGround.png' },
+    { key: 'gameOver', url: 'static/images/football/gameover.png' }
   ],
   spritesheets: [
     {
       key: 'playerAnim',
-      url: '/static/images/football/Qiuyuan.png',
+      url: 'static/images/football/Qiuyuan.png',
       frameWidth: 92.5,
       frameHeight: 92.5
     },
     {
       key: 'ballAnim',
-      url: '/static/images/football/Ball.png',
+      url: 'static/images/football/Ball.png',
       frameWidth: 31,
       frameHeight: 31
     },
     {
       key: 'goalkeeperAnim',
-      url: '/static/images/football/Goalkeeper.png',
+      url: 'static/images/football/Goalkeeper.png',
       frameWidth: 55,
       frameHeight: 56
     },
+    {
+      key: 'playerCollision',
+      url: 'static/images/football/QiuyuanCollision.png',
+      frameWidth: 92.5,
+      frameHeight: 92.5
+    },
   ]
 };
 
@@ -401,7 +408,8 @@ class GameScene extends Phaser.Scene {
     const x = Phaser.Math.Between(30, GAME_WIDTH - 30);
     const obstacle = this.physics.add.sprite(x, -50, 'pile');
     obstacle.setScale(0.7);
-    obstacle.setVelocityY(this.speed * this.acceleration * 10);
+    // 降低速度（从原来的this.speed * this.acceleration * 10调整为）
+    obstacle.setVelocityY(this.speed * this.acceleration * 5); // 速度减半
     obstacle.setDepth(8);
     obstacle.type = 'pile';
 
@@ -410,16 +418,24 @@ class GameScene extends Phaser.Scene {
 
     this.obstacles.push(obstacle);
 
-    // 超出屏幕后销毁
+    // 替换原来的计时器，使用每帧检测位置
     this.time.addEvent({
-      delay: 5000,
+      delay: 100, // 每100ms检测一次
+      loop: true,
       callback: () => {
         if (obstacle.active) {
-          obstacle.destroy();
-          this.obstacles = this.obstacles.filter(o => o !== obstacle);
-          // 成功绕过障碍物加分
-          this.score++;
-          this.updateScore();
+          // 当障碍物底部超过屏幕高度时销毁
+          if (obstacle.y > GAME_HEIGHT + obstacle.height) {
+            obstacle.destroy();
+            this.obstacles = this.obstacles.filter(o => o !== obstacle);
+            this.score++;
+            this.updateScore();
+            // 停止检测
+            this.time.removeEvent(event);
+          }
+        } else {
+          // 障碍物已被碰撞销毁，停止检测
+          this.time.removeEvent(event);
         }
       }
     });
@@ -438,7 +454,8 @@ class GameScene extends Phaser.Scene {
     }
 
     powerUp.setScale(0.7);
-    powerUp.setVelocityY(this.speed * this.acceleration * 8);
+    // 降低道具速度（从原来的this.speed * this.acceleration * 8调整为）
+    powerUp.setVelocityY(this.speed * this.acceleration * 4); // 速度降低
     powerUp.setDepth(8);
 
     // 碰撞检测
@@ -446,9 +463,9 @@ class GameScene extends Phaser.Scene {
 
     this.powerUps.push(powerUp);
 
-    // 超出屏幕后销毁
+    // 延长道具生命周期
     this.time.addEvent({
-      delay: 5000,
+      delay: 8000, // 延长至8秒
       callback: () => {
         if (powerUp.active) {
           powerUp.destroy();
@@ -472,7 +489,7 @@ class GameScene extends Phaser.Scene {
     this.livesText.setText(`生命: ${this.lives}`);
 
     // 显示受伤效果
-    player.setTexture('playerCollision', 0);
+    player.setTexture('playerCollision');
     this.time.addEvent({
       delay: 618,
       callback: () => {
@@ -656,8 +673,8 @@ watch(currentScene, (newVal) => {
 <style scoped>
 .game-container {
   position: relative;
-  width: 320px;
-  height: 480px;
+  width: 100%;
+  height: 100vh;
   margin: 0 auto;
   overflow: hidden;
 }
@@ -684,30 +701,27 @@ watch(currentScene, (newVal) => {
 }
 
 .btn {
-  position: absolute;
-  width: 120px;
+  width: 80%;
   height: 40px;
-  line-height: 40px;
+  border-radius: 5px;
   text-align: center;
-  color: white;
-  border-radius: 20px;
-  cursor: pointer;
-  font-weight: bold;
-  z-index: 101;
+  line-height: 40px;
+  color: #333;
+  box-shadow: 0 5px 0px #07942c;
+  box-shadow: 0 5px 0px rgba(0, 0, 0, 0.17);
+  position: absolute;
+  left: 50%;
+  margin: 0 0 0 -40%;
 }
 
 .rule {
+  background: #fff;
   bottom: 100px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #666;
 }
 
 .start {
-  bottom: 50px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #f00;
+  background: #ffff00;
+  bottom: 40px;
 }
 
 .ruleshadow {