日常开发

src/views/game/components/football.vue

@@ -48,10 +48,9 @@
 
     <!-- 游戏结束 -->
     <div v-if="currentScene === 'gameover'" class="gameend">
-      <div v-if="currentScene === 'gameover'" class="game_fenshu">
+      <div class="game_fenshu">
         <span>{{ score }}</span>分
       </div>
-
       <div class="chenghao">恭喜你获得称号<p>{{ getTitle(score) }}</p>
       </div>
       <!-- <div class="game_ogain" @click="restartGame">返回游戏</div> -->
@@ -102,11 +101,6 @@ const game = ref(null);
 const gameConfig = ref(null);
 let scoreListener = null; // 存储事件监听器引用
 
-// 游戏常量
-const width = document.documentElement.clientWidth;
-const height = document.documentElement.clientHeight;
-const GAME_WIDTH = width;
-const GAME_HEIGHT = height;
 
 // 游戏资源
 const gameAssets = {
@@ -164,8 +158,8 @@ const initGame = () => {
   // 游戏配置
   gameConfig.value = {
     type: Phaser.AUTO,
-    width: GAME_WIDTH,
-    height: GAME_HEIGHT,
+    width: clientObj.value.width,
+    height: clientObj.value.height,
     parent: 'gameCanvas' + props.type,
     physics: {
       default: 'arcade',
@@ -232,11 +226,11 @@ class PreloaderScene extends Phaser.Scene {
     const progressBar = this.add.graphics();
     const progressBox = this.add.graphics();
     progressBox.fillStyle(0x222222, 0.8);
-    progressBox.fillRect(GAME_WIDTH / 2 - 160, GAME_HEIGHT / 2 - 25, 320, 50);
+    progressBox.fillRect(clientObj.value.width / 2 - 160, clientObj.value.height / 2 - 25, 320, 50);
 
     const loadingText = this.make.text({
-      x: GAME_WIDTH / 2,
-      y: GAME_HEIGHT / 2 - 50,
+      x: clientObj.value.width / 2,
+      y: clientObj.value.height / 2 - 50,
       text: 'Loading...',
       style: {
         font: '20px monospace',
@@ -245,8 +239,8 @@ class PreloaderScene extends Phaser.Scene {
     }).setOrigin(0.5, 0.5);
 
     const percentText = this.make.text({
-      x: GAME_WIDTH / 2,
-      y: GAME_HEIGHT / 2,
+      x: clientObj.value.width / 2,
+      y: clientObj.value.height / 2,
       text: '0%',
       style: {
         font: '18px monospace',
@@ -258,7 +252,7 @@ class PreloaderScene extends Phaser.Scene {
       percentText.setText(`${Math.round(value * 100)}%`);
       progressBar.clear();
       progressBar.fillStyle(0xffffff, 1);
-      progressBar.fillRect(GAME_WIDTH / 2 - 150, GAME_HEIGHT / 2 - 15, 300 * value, 30);
+      progressBar.fillRect(clientObj.value.width / 2 - 150, clientObj.value.height / 2 - 15, 300 * value, 30);
     });
 
     this.load.on('complete', () => {
@@ -370,14 +364,14 @@ class GameScene extends Phaser.Scene {
 
   createBackground() {
     // 创建滚动背景
-    this.background = this.add.tileSprite(0, 0, GAME_WIDTH, GAME_HEIGHT, 'grass');
+    this.background = this.add.tileSprite(0, 0, clientObj.value.width, clientObj.value.height, 'grass');
     this.background.setOrigin(0, 0);
   }
 
   createPlayer() {
     // 创建玩家
-    //this.player = this.physics.add.sprite(GAME_WIDTH / 2, GAME_HEIGHT - 100, 'playerAnim');
-    this.player = this.physics.add.sprite(direction.value + 46, GAME_HEIGHT - 100, 'playerAnim');
+    //this.player = this.physics.add.sprite(clientObj.value.width / 2, clientObj.value.height - 100, 'playerAnim');
+    this.player = this.physics.add.sprite(direction.value + 46, clientObj.value.height - 100, 'playerAnim');
     this.player.setCollideWorldBounds(true);
     this.player.setScale(0.8);
     this.player.lives = this.lives;
@@ -387,19 +381,19 @@ class GameScene extends Phaser.Scene {
   createHUD() {
     // 分数显示
     this.scoreText = this.add.text(10, 10, `分数: ${this.score}`, {
-      fontSize: '16px',
+      fontSize: '24px',
       fill: '#ffffff',
       backgroundColor: 'rgba(0,0,0,0.5)',
-      padding: { x: 5, y: 2 }
+      padding: { x: 10, y: 10 }
     });
     this.scoreText.setDepth(10);
 
     // 生命值显示
-    this.livesText = this.add.text(GAME_WIDTH - 80, 10, `生命: ${this.lives}`, {
-      fontSize: '16px',
+    this.livesText = this.add.text(clientObj.value.width - 122, 10, `生命: ${this.lives}`, {
+      fontSize: '24px',
       fill: '#ffffff',
       backgroundColor: 'rgba(0,0,0,0.5)',
-      padding: { x: 5, y: 2 }
+      padding: { x: 10, y: 10 }
     });
     this.livesText.setDepth(10);
   }
@@ -412,12 +406,12 @@ class GameScene extends Phaser.Scene {
     this.input.on('pointermove', (pointer) => {
       if (this.gameActive && pointer.isDown && !this.isShooting) {
         // 水平移动
-        this.player.x = Phaser.Math.Clamp(pointer.x, this.player.width / 2, GAME_WIDTH - this.player.width / 2);
+        this.player.x = Phaser.Math.Clamp(pointer.x, this.player.width / 2, clientObj.value.width - this.player.width / 2);
         // 垂直移动（限制范围）
         this.player.y = Phaser.Math.Clamp(
           pointer.y,
           0, // 最小Y值
-          GAME_HEIGHT// 最大Y值
+          clientObj.value.height// 最大Y值
         );
       }
     });
@@ -499,7 +493,7 @@ class GameScene extends Phaser.Scene {
   }
 
   spawnObstacle() {
-    const x = Phaser.Math.Between(30, GAME_WIDTH - 30);
+    const x = Phaser.Math.Between(30, clientObj.value.width - 30);
     const obstacle = this.physics.add.sprite(x, -50, 'pile');
     obstacle.setScale(0.7);
     // 降低速度（从原来的this.speed * this.acceleration * 10调整为）
@@ -518,7 +512,7 @@ class GameScene extends Phaser.Scene {
       loop: true,
       callback: () => {
         if (obstacle.active) {
-          if (obstacle.y > GAME_HEIGHT + obstacle.height) {
+          if (obstacle.y > clientObj.value.height + obstacle.height) {
             obstacle.destroy();
             this.obstacles = this.obstacles.filter(o => o !== obstacle);
             this.score++;
@@ -533,7 +527,7 @@ class GameScene extends Phaser.Scene {
   }
 
   spawnPowerUp(type) {
-    const x = Phaser.Math.Between(30, GAME_WIDTH - 30);
+    const x = Phaser.Math.Between(30, clientObj.value.width - 30);
     let powerUp;
 
     if (type === 'jersey') {
@@ -639,7 +633,7 @@ class GameScene extends Phaser.Scene {
     this.acceleration += 0.5;
 
     // 显示升级提示
-    const levelUpText = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT / 2, `Level ${this.level}!`, {
+    const levelUpText = this.add.text(clientObj.value.width / 2, clientObj.value.height / 2, `Level ${this.level}!`, {
       fontSize: '32px',
       fill: '#ffff00',
       stroke: '#000000',
@@ -707,13 +701,13 @@ class GameScene extends Phaser.Scene {
     this.background.setTexture('goalBackground');
 
     // 创建球门
-    this.goal = this.physics.add.sprite(GAME_WIDTH / 2, 100, 'goal');
+    this.goal = this.physics.add.sprite(clientObj.value.width / 2, 100, 'goal');
     this.goal.setScale(0.8);
     this.goal.setImmovable(true);
     this.goal.setDepth(5);
 
     // 创建守门员
-    this.goalkeeper = this.physics.add.sprite(GAME_WIDTH / 2, 150, 'goalkeeperAnim');
+    this.goalkeeper = this.physics.add.sprite(clientObj.value.width / 2, 150, 'goalkeeperAnim');
     this.goalkeeper.setScale(0.9);
     this.goalkeeper.setImmovable(true);
     this.goalkeeper.anims.play('goalkeeperAnim', true);
@@ -722,7 +716,7 @@ class GameScene extends Phaser.Scene {
     // 让守门员左右移动
     this.tweens.add({
       targets: this.goalkeeper,
-      x: [GAME_WIDTH / 2 - 50, GAME_WIDTH / 2 + 50],
+      x: [clientObj.value.width / 2 - 50, clientObj.value.width / 2 + 50],
       duration: 4000,
       ease: 'Sine.inOut',
       repeat: -1,
@@ -730,7 +724,7 @@ class GameScene extends Phaser.Scene {
     });
 
     // 调整球员位置（准备射门）
-    this.player.setPosition(GAME_WIDTH / 2, GAME_HEIGHT - 100);
+    this.player.setPosition(clientObj.value.width / 2, clientObj.value.height - 100);
     this.player.setTexture('playerShoot');
     this.player.setVelocity(0);
 
@@ -741,7 +735,7 @@ class GameScene extends Phaser.Scene {
     this.ball.setDepth(8);
 
     // 显示射门提示和倒计时
-    // this.shootHint = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT - 80, '点击或按空格键射门', {
+    // this.shootHint = this.add.text(clientObj.value.width / 2, clientObj.value.height - 80, '点击或按空格键射门', {
     //   fontSize: '16px',
     //   fill: '#ffffff',
     //   backgroundColor: 'rgba(0,0,0,0.5)',
@@ -750,7 +744,7 @@ class GameScene extends Phaser.Scene {
     // this.shootHint.setDepth(10);
 
     // 添加射门倒计时显示
-    this.shootTimerText = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT - 50, `剩余时间: ${this.shootTimeLeft}秒`, {
+    this.shootTimerText = this.add.text(clientObj.value.width / 2, clientObj.value.height - 50, `剩余时间: ${this.shootTimeLeft}秒`, {
       fontSize: '16px',
       fill: '#ffffff',
       backgroundColor: 'rgba(0,0,0,0.5)',
@@ -800,7 +794,7 @@ class GameScene extends Phaser.Scene {
     }
 
     // 显示超时提示
-    const timeoutText = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT / 2, '射门超时！', {
+    const timeoutText = this.add.text(clientObj.value.width / 2, clientObj.value.height / 2, '射门超时！', {
       fontSize: '24px',
       fill: '#f00',
       stroke: '#000000',
@@ -884,7 +878,7 @@ class GameScene extends Phaser.Scene {
     this.isShooting = false;
 
     // 显示成功提示
-    const successText = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT / 2, '射门成功！+3分', {
+    const successText = this.add.text(clientObj.value.width / 2, clientObj.value.height / 2, '射门成功！+3分', {
       fontSize: '24px',
       fill: '#0f0',
       stroke: '#000000',
@@ -926,7 +920,7 @@ class GameScene extends Phaser.Scene {
     );
 
     // 显示失败提示
-    const failText = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT / 2, '射门失败！', {
+    const failText = this.add.text(clientObj.value.width / 2, clientObj.value.height / 2, '射门失败！', {
       fontSize: '24px',
       fill: '#f00',
       stroke: '#000000',
@@ -971,7 +965,7 @@ class GameScene extends Phaser.Scene {
     // 重置玩家状态
     if (this.player) {
       this.player.setTexture('playerAnim');
-      this.player.setPosition(GAME_WIDTH / 2, GAME_HEIGHT - 100);
+      this.player.setPosition(clientObj.value.width / 2, clientObj.value.height - 100);
       this.player.setVelocity(0);
     }
 
@@ -1028,11 +1022,11 @@ class GameScene extends Phaser.Scene {
     this.physics.pause();
 
     // 显示游戏结束画面
-    this.add.image(GAME_WIDTH / 2, GAME_HEIGHT / 2, 'gameOver').setOrigin(0.5);
+    this.add.image(clientObj.value.width / 2, clientObj.value.height / 2, 'gameOver').setOrigin(0.5);
 
     // 触发游戏结束事件
     this.time.addEvent({
-      delay: 2000,
+      delay: 1000,
       callback: () => {
         this.game.events.emit('gameOver');
       },