日常开发

src/views/game/football.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="game-container">
     <div id="gameCanvas" class="game-canvas"></div>
-    <canvas ref="canvasRef" :width="clientObj.width" :height="clientObj.height"
-      style="position:fixed;left: 0; top: 0; z-index: 999;"></canvas>
+    <!-- <canvas ref="canvasRef" :width="clientObj.width" :height="clientObj.height"
+      style="position:fixed;left: 0; top: 0; z-index: 999;"></canvas> -->
     <!-- 游戏启动界面 -->
     <div v-if="currentScene === 'start'" class="gamestart">
       <img v-if="currentScene === 'start'" src="/static/images/football/game_start.jpg" class="start_bg" />
@@ -330,6 +330,9 @@ class GameScene extends Phaser.Scene {
     this.obstacleEvent = null;
     this.jerseyEvent = null;
     this.broomEvent = null;
+    this.shootTimeout = null; // 射门超时计时器
+    this.shootTimeLeft = 15; // 剩余射门时间
+    this.shootTimerText = null; // 倒计时显示文本
   }
 
   create() {
@@ -659,128 +662,210 @@ class GameScene extends Phaser.Scene {
       console.error('updateScore 错误:', error);
     }
   }
-  enterShootingMode() {
-    this.gameActive = false;
-    this.isShooting = true;
-    // 暂停计分定时器
-    if (this.timer) {
-      this.timer.paused = true;
-    }
-    // 关键修复：重置键盘状态，清除所有按键的按下状态
-    this.input.keyboard.resetKeys();
-    // 额外保险：手动清除方向键状态
-    this.cursors.left.isDown = false;
-    this.cursors.right.isDown = false;
-    this.cursors.up.isDown = false;
-    this.cursors.down.isDown = false;
-
-    // 停止所有生成事件
-    if (this.obstacleEvent) this.obstacleEvent.remove();
-    if (this.jerseyEvent) this.jerseyEvent.remove();
-    if (this.broomEvent) this.broomEvent.remove();
+enterShootingMode() {
+  this.gameActive = false;
+  this.isShooting = true;
+  this.shootTimeLeft = 15; // 重置剩余时间
+  
+  // 暂停计分定时器
+  if (this.timer) {
+    this.timer.paused = true;
+  }
+  
+  // 重置键盘状态
+  this.input.keyboard.resetKeys();
+  this.cursors.left.isDown = false;
+  this.cursors.right.isDown = false;
+  this.cursors.up.isDown = false;
+  this.cursors.down.isDown = false;
+
+  // 停止所有生成事件
+  if (this.obstacleEvent) this.obstacleEvent.remove();
+  if (this.jerseyEvent) this.jerseyEvent.remove();
+  if (this.broomEvent) this.broomEvent.remove();
+
+  // 清除现有障碍物和道具
+  this.obstacles.forEach(obs => obs.destroy());
+  this.obstacles = [];
+  this.powerUps.forEach(p => p.destroy());
+  this.powerUps = [];
+
+  // 创建射门场景背景
+  this.background.setTexture('goalBackground');
+
+  // 创建球门
+  this.goal = this.physics.add.sprite(GAME_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.setScale(0.9);
+  this.goalkeeper.setImmovable(true);
+  this.goalkeeper.anims.play('goalkeeperAnim', true);
+  this.goalkeeper.setDepth(7);
+
+  // 让守门员左右移动
+  this.tweens.add({
+    targets: this.goalkeeper,
+    x: [GAME_WIDTH / 2 - 50, GAME_WIDTH / 2 + 50],
+    duration: 4000,
+    ease: 'Sine.inOut',
+    repeat: -1,
+    yoyo: true
+  });
 
-    // 清除现有障碍物和道具
-    this.obstacles.forEach(obs => obs.destroy());
-    this.obstacles = [];
-    this.powerUps.forEach(p => p.destroy());
-    this.powerUps = [];
+  // 调整球员位置（准备射门）
+  this.player.setPosition(GAME_WIDTH / 2, GAME_HEIGHT - 100);
+  this.player.setTexture('playerShoot');
+  this.player.setVelocity(0);
+
+  // 创建足球
+  this.ball = this.physics.add.sprite(this.player.x, this.player.y - 50, 'ballAnim');
+  this.ball.setScale(0.8);
+  this.ball.anims.play('ballAnim', true);
+  this.ball.setDepth(8);
+
+  // 显示射门提示和倒计时
+  // this.shootHint = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT - 80, '点击或按空格键射门', {
+  //   fontSize: '16px',
+  //   fill: '#ffffff',
+  //   backgroundColor: 'rgba(0,0,0,0.5)',
+  //   padding: { x: 5, y: 2 }
+  // }).setOrigin(0.5);
+  // this.shootHint.setDepth(10);
+
+  // 添加射门倒计时显示
+  this.shootTimerText = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT - 50, `剩余时间: ${this.shootTimeLeft}秒`, {
+    fontSize: '16px',
+    fill: '#ffffff',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    padding: { x: 5, y: 2 }
+  }).setOrigin(0.5);
+  this.shootTimerText.setDepth(10);
+
+  // 设置射门超时计时器
+  this.shootTimeout = this.time.addEvent({
+    delay: 1000, // 每秒触发一次
+    callback: () => {
+      this.shootTimeLeft--;
+      this.shootTimerText.setText(`剩余时间: ${this.shootTimeLeft}秒`);
+      
+      // 时间到未射门，判定失败
+      if (this.shootTimeLeft <= 0) {
+        this.handleShootTimeout();
+      }
+    },
+    loop: true
+  });
 
-    // 创建射门场景背景
-    this.background.setTexture('goalBackground');
-
-    // 创建球门
-    this.goal = this.physics.add.sprite(GAME_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.setScale(0.9);
-    this.goalkeeper.setImmovable(true);
-    this.goalkeeper.anims.play('goalkeeperAnim', true);
-    this.goalkeeper.setDepth(7);
-
-    // 让守门员左右移动
-    this.tweens.add({
-      targets: this.goalkeeper,
-      x: [GAME_WIDTH / 2 - 50, GAME_WIDTH / 2 + 50],
-      duration: 4000,
-      ease: 'Sine.inOut',
-      repeat: -1,
-      yoyo: true
-    });
+  // 射门控制
+  this.input.keyboard.on('keydown-SPACE', this.shootBall, this);
+  this.input.on('pointerdown', this.shootBall, this);
+}
 
-    // 调整球员位置（准备射门）
-    this.player.setPosition(GAME_WIDTH / 2, GAME_HEIGHT - 100);
-    this.player.setTexture('playerShoot');
-    // 关键修复：停止玩家所有移动
-    this.player.setVelocity(0);
+handleShootTimeout() {
+  // 清除超时计时器
+  if (this.shootTimeout) {
+    this.shootTimeout.remove();
+    this.shootTimeout = null;
+  }
 
-    // 创建足球（修复：让足球跟随玩家位置）
-    this.ball = this.physics.add.sprite(this.player.x, this.player.y - 50, 'ballAnim');
-    this.ball.setScale(0.8);
-    this.ball.anims.play('ballAnim', true);
-    this.ball.setDepth(8);
+  // 禁用输入
+  this.input.keyboard.off('keydown-SPACE', this.shootBall, this);
+  this.input.off('pointerdown', this.shootBall, this);
 
-    // 显示射门提示
-    this.shootHint = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT - 50, '点击或按空格键射门', {
-      fontSize: '16px',
-      fill: '#ffffff',
-      backgroundColor: 'rgba(0,0,0,0.5)',
-      padding: { x: 5, y: 2 }
-    }).setOrigin(0.5);
-    this.shootHint.setDepth(10);
+  // 移除提示文本
+  if (this.shootHint) {
+    this.shootHint.destroy();
+    this.shootHint = null;
+  }
+  if (this.shootTimerText) {
+    this.shootTimerText.destroy();
+    this.shootTimerText = null;
+  }
 
-    // 射门控制
-    this.input.keyboard.on('keydown-SPACE', this.shootBall, this);
-    this.input.on('pointerdown', this.shootBall, this);
+  // 显示超时提示
+  const timeoutText = this.add.text(GAME_WIDTH / 2, GAME_HEIGHT / 2, '射门超时！', {
+    fontSize: '24px',
+    fill: '#f00',
+    stroke: '#000000',
+    strokeThickness: 2
+  }).setOrigin(0.5);
+  timeoutText.setDepth(10);
+
+  // 2秒后返回奔跑场景
+  this.time.addEvent({
+    delay: 2000,
+    callback: () => {
+      timeoutText.destroy();
+      this.ball.destroy();
+      this.resetToRunningScene();
+      // 恢复计分定时器
+      if (this.timer) {
+        this.timer.paused = false;
+      }
+    },
+    callbackScope: this
+  });
+}
+
+shootBall() {
+  if (!this.isShooting) return;
+
+  // 清除超时计时器
+  if (this.shootTimeout) {
+    this.shootTimeout.remove();
+    this.shootTimeout = null;
   }
 
-  shootBall() {
-    if (!this.isShooting) return;
+  // 移除时间显示文本
+  if (this.shootTimerText) {
+    this.shootTimerText.destroy();
+    this.shootTimerText = null;
+  }
 
-    // 禁用输入
-    this.input.keyboard.off('keydown-SPACE', this.shootBall, this);
-    this.input.off('pointerdown', this.shootBall, this);
-    // 移除射门模式下的左右移动监听（如果添加了）
-    this.input.keyboard.off('keydown-LEFT');
-    this.input.keyboard.off('keydown-RIGHT');
+  // 禁用输入
+  this.input.keyboard.off('keydown-SPACE', this.shootBall, this);
+  this.input.off('pointerdown', this.shootBall, this);
+  this.input.keyboard.off('keydown-LEFT');
+  this.input.keyboard.off('keydown-RIGHT');
 
-    if (this.shootHint) {
-      this.shootHint.destroy();
-      this.shootHint = null;
-    }
+  if (this.shootHint) {
+    this.shootHint.destroy();
+    this.shootHint = null;
+  }
 
-    // 计算龙门网内的目标位置
-    const goalNetY = this.goal.y + 30;
-    const goalNetX = this.player.x;
-
-    // 创建射门动画
-    const ballTween = this.tweens.add({
-      targets: this.ball,
-      x: goalNetX,
-      y: goalNetY,
-      duration: 1000,
-      ease: 'Power1',
-      onComplete: () => {
-        if (!this.ball || !this.ball.active) return;
-
-        // 判断是否成功
-        const isSuccess = Phaser.Math.Between(0, 1) === 1;
-        if (isSuccess) {
-          this.score += 3;
-          this.updateScore();
-          this.ball.setDepth(6.5); // 成功：足球在守门员后方（网内）
-          this.successShoot();
-        } else {
-          this.ball.setDepth(7.5); // 失败：足球在守门员前方
-          this.failShoot();
-        }
-        ballTween.remove();
+  // 计算龙门网内的目标位置
+  const goalNetY = this.goal.y + 30;
+  const goalNetX = this.player.x;
+
+  // 创建射门动画
+  const ballTween = this.tweens.add({
+    targets: this.ball,
+    x: goalNetX,
+    y: goalNetY,
+    duration: 1000,
+    ease: 'Power1',
+    onComplete: () => {
+      if (!this.ball || !this.ball.active) return;
+
+      // 判断是否成功
+      const isSuccess = Phaser.Math.Between(0, 1) === 1;
+      if (isSuccess) {
+        this.score += 3;
+        this.updateScore();
+        this.ball.setDepth(6.5); // 成功：足球在守门员后方（网内）
+        this.successShoot();
+      } else {
+        this.ball.setDepth(7.5); // 失败：足球在守门员前方
+        this.failShoot();
       }
-    });
-  }
+      ballTween.remove();
+    }
+  });
+}
   // 射门成功处理
   successShoot() {
     this.isShooting = false;
@@ -855,31 +940,43 @@ class GameScene extends Phaser.Scene {
   }
 
   // 重置为奔跑场景
-  resetToRunningScene() {
-    this.clearScene();
-
-    // 重置玩家状态
-    if (this.player) {
-      this.player.setTexture('playerAnim');
-      this.player.setPosition(GAME_WIDTH / 2, GAME_HEIGHT - 100);
-      this.player.setVelocity(0);
-    }
+resetToRunningScene() {
+  // 确保清除超时计时器
+  if (this.shootTimeout) {
+    this.shootTimeout.remove();
+    this.shootTimeout = null;
+  }
+  
+  // 清除时间显示文本
+  if (this.shootTimerText) {
+    this.shootTimerText.destroy();
+    this.shootTimerText = null;
+  }
 
-    // 恢复背景和游戏状态
-    if (this.background) this.background.setTexture('grass');
-    this.gameActive = true;
-    this.isShooting = false;
+  this.clearScene();
 
-    // 关键：确保所有射门场景元素被彻底清理
-    if (this.ball) {
-      this.ball.destroy();
-      this.ball = null; // 显式置空引用
-    }
+  // 重置玩家状态
+  if (this.player) {
+    this.player.setTexture('playerAnim');
+    this.player.setPosition(GAME_WIDTH / 2, GAME_HEIGHT - 100);
+    this.player.setVelocity(0);
+  }
 
-    // 重新开始生成障碍物
-    this.startSpawning();
+  // 恢复背景和游戏状态
+  if (this.background) this.background.setTexture('grass');
+  this.gameActive = true;
+  this.isShooting = false;
+
+  // 确保足球被销毁
+  if (this.ball) {
+    this.ball.destroy();
+    this.ball = null;
   }
 
+  // 重新开始生成障碍物
+  this.startSpawning();
+}
+
   gameOver() {
     this.gameActive = false;
 
@@ -1246,7 +1343,7 @@ const getInit = async () => {
         boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
         proportion.value = (clientObj.value.height / (arr[3] - arr[1])).toFixed(2);
       }
-      getCanvas();
+      //getCanvas();
     }
     if (e?.cmd == 'terminate_bodyposecontroller') {
       if (e?.code == 0) {