原生JS格斗游戏：计时结束后禁用精灵攻击与移动的实现方法

核心思路：全局状态锁 #

先定义一个全局变量控制游戏是否处于可交互状态，所有移动、攻击逻辑都依赖这个状态：

let gameActive = true; // 初始为可交互状态

1. 禁止计时结束后的移动与攻击 #

在你的移动控制函数和攻击函数开头，先判断gameActive状态，非活跃状态直接终止函数执行：

移动控制示例 #

// 玩家移动逻辑
function handlePlayerMovement() {
  if (!gameActive) return; // 游戏结束则不执行移动
  // 你的原移动代码（键盘事件监听、位置更新等）
}

// 敌人移动逻辑
function handleEnemyMovement() {
  if (!gameActive) return;
  // 你的原敌人移动代码
}

攻击逻辑示例 #

// 玩家攻击逻辑
function playerAttack() {
  if (!gameActive) return; // 游戏结束则不执行攻击
  // 你的原攻击代码（检测碰撞、减少敌人血量等）
}

// 敌人攻击逻辑
function enemyAttack() {
  if (!gameActive) return;
  // 你的原敌人攻击代码
}

2. 计时结束后锁定状态并只显示一次胜负 #

修改计时器结束的回调函数，设置gameActive为false，仅计算一次胜负结果，避免文本频繁切换：

function onTimerEnd() {
  gameActive = false; // 锁定游戏状态
  const playerHealth = parseInt(document.getElementById('player-health').textContent);
  const enemyHealth = parseInt(document.getElementById('enemy-health').textContent);
  
  let result = '';
  if (playerHealth > enemyHealth) {
    result = '蓝色玩家获胜！';
  } else if (enemyHealth > playerHealth) {
    result = '红色敌人获胜！';
  } else {
    result = '平局！';
  }
  
  document.getElementById('result-text').textContent = result; // 仅更新一次结果
}

3. 血量耗尽后阻止重复触发胜负判断 #

在攻击导致血量变化后，立即检查是否有一方血量≤0，若触发则锁定状态并直接显示最终结果，后续攻击不再生效：

玩家攻击时的血量检查 #

function playerAttack() {
  if (!gameActive) return;
  
  // 原攻击逻辑：减少敌人血量
  enemyHealth -= 15;
  document.getElementById('enemy-health').textContent = enemyHealth;
  
  // 检查敌人是否死亡
  if (enemyHealth <= 0) {
    gameActive = false;
    document.getElementById('result-text').textContent = '蓝色玩家获胜！';
    return; // 终止后续逻辑
  }
}

敌人攻击时的血量检查 #

function enemyAttack() {
  if (!gameActive) return;
  
  // 原攻击逻辑：减少玩家血量
  playerHealth -= 15;
  document.getElementById('player-health').textContent = playerHealth;
  
  // 检查玩家是否死亡
  if (playerHealth <= 0) {
    gameActive = false;
    document.getElementById('result-text').textContent = '红色敌人获胜！';
    return; // 终止后续逻辑
  }
}

内容的提问来源于stack exchange，提问作者That New Coder