如何在格斗游戏中冻结角色动作与攻击（基于原生 JavaScript 实现）-html教程-PHP中文网

如何在格斗游戏中冻结角色动作与攻击（基于原生 JavaScript 实现）

本文介绍如何通过全局游戏状态控制，在计时结束或胜负判定后立即禁用玩家移动、攻击及碰撞检测，彻底阻止“时间结束后仍可互殴”的逻辑漏洞，适用于纯原生 js 的 canvas 游戏开发。

本文介绍如何通过全局游戏状态控制，在计时结束或胜负判定后立即禁用玩家移动、攻击及碰撞检测，彻底阻止“时间结束后仍可互殴”的逻辑漏洞，适用于纯原生 js 的 canvas 游戏开发。

在格斗类 Canvas 游戏中，仅靠 clearTimeout 或显示胜利界面并不足以真正终止交互逻辑——若未主动拦截输入和物理更新，玩家仍能持续按键触发攻击、移动，甚至造成健康值反复波动（如题中所述：时间归零后文本在“Player 1 wins!”和“Player 2 wins!”间跳变）。根本解法是引入统一的游戏状态机（Game State Management），以布尔标志 gameIsActive 作为中央闸门，系统性地阻断所有实时交互行为。

✅ 核心实现：三步状态管控

声明全局状态变量
在脚本顶部添加：

let gameIsActive = true; // 初始为活跃状态

在关键终止点关闭状态
修改 decreaseTimer() 和胜负判定逻辑，在游戏应结束的时刻置为 false：

if (time === 0) {
    timeLeft.innerHTML = '00:00';
    gameIsActive = false; // ⚠️ 关键：时间到即冻结
    determineWinner({ Player, Enemy, timerId });
    // ...重置位置等
}

// 同样在 health 判定处同步关闭
if (Enemy.health

在所有交互入口加状态守卫

键盘事件监听器：包裹 keydown/keyup 全部逻辑

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

window.addEventListener('keydown', (event) => {
    if (!gameIsActive) return; // 状态非活跃，直接退出
    // 原有按键处理逻辑（移动、跳跃、攻击）...
});

window.addEventListener('keyup', (event) => {
    if (!gameIsActive) return;
    // 原有松键逻辑...
});

动画主循环（animate()）中禁用物理与碰撞

function animate() {
    requestAnimationFrame(animate);
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // ✅ 仅当游戏活跃时才执行更新与碰撞
    if (gameIsActive) {
        Player.update();
        Enemy.update();

        // 移动逻辑（保持原有结构，但被 if 包裹）
        Player.velocity.x = 0;
        if (keys.a.pressed && Player.lastKey === "a") Player.velocity.x = -5;
        // ...其他移动判断

        Enemy.velocity.x = 0;
        if (keys.ArrowLeft.pressed && Enemy.lastKey === "ArrowLeft") Enemy.velocity.x = -5;
        // ...其他移动判断

        // ✅ 碰撞检测仅在活跃时运行
        if (rectangularCollision({ rectangle1: Player, rectangle2: Enemy })) {
            Player.isAttacking = false;
            Enemy.health -= 20;
            document.querySelector('#enemy-health').style.width = Enemy.health + '%';
        }
        if (rectangularCollision({ rectangle1: Enemy, rectangle2: Player })) {
            Enemy.isAttacking = false;
            Player.health -= 20;
            document.querySelector('#player-health').style.width = Player.health + '%';
        }
    } else {
        // ❌ 非活跃状态：强制清空速度，防止残留惯性
        Player.velocity.x = Player.velocity.y = 0;
        Enemy.velocity.x = Enemy.velocity.y = 0;
        // 可选：绘制静止姿态（如站立帧），增强视觉反馈
    }
}

⚠️ 注意事项与最佳实践

避免状态遗漏：检查所有可能影响游戏逻辑的函数（如自定义 attack()、jump()、外部 API 调用），确保它们均受 gameIsActive 控制。例如，Sprite.attack() 方法内部无需修改，但其调用入口（keydown 中）必须已受保护。
视觉反馈强化：可在 gameIsActive === false 时，为角色添加半透明遮罩、灰度滤镜（CSS filter: grayscale(100%) opacity(0.7)）或播放结束动画，明确传达“已锁定”状态。
状态复用扩展性：未来如需支持暂停（'paused'）、回合制（'round1', 'round2'）或多状态流程，建议将 gameIsActive 升级为字符串枚举（如 gameState = 'active' | 'paused' | 'ended'），并用 switch(gameState) 替代布尔判断，提升可维护性。
内存与性能：gameIsActive = false 后，animate() 仍持续执行（因 requestAnimationFrame 未取消），但内部逻辑被跳过，开销极低。如需彻底停止渲染，可在状态变更时调用 cancelAnimationFrame(animId)，但对本例非必需。

通过以上设计，你将获得一个健壮、可扩展且符合游戏开发惯例的状态控制系统——它不仅解决“时间结束后仍可攻击”的 Bug，更为后续添加菜单、存档、音效管理等复杂功能奠定坚实基础。