# 将隐藏选项卡视为游戏状态

> 使用页面可见性更改来选择暂停哪些内容、保存哪些内容以及如何在不发生时间跳跃的情况下恢复浏览器游戏。

- URL: https://oneshotgems.ai/zh-Hans/topics/pausing-background-games
- 类别: 游戏开发者指南
- 类型: 指南
- 更新日期: 2026年10月5日

浏览器游戏运行时，玩家可能会切换标签页、最小化窗口或锁定设备。浏览器通常会暂停隐藏文档中的动画回调，并降低计时器的触发频率，因此更新循环不能假定每个预定的时钟回调都会到达。应将页面可见性建模为明确的状态转换。这样就能预先规定计时器、输入、声音和已保存进度的处理方式，而不必在玩家回来时猜测中间经过了多少模拟时间。

## 明确可见性改变时的行为

对于考验反应的游戏，当 document.visibilityState 变为 hidden 时暂停对局、冻结倒计时并清除按住的按键状态；页面再次可见时显示继续按钮。回合制谜题可以不显示暂停画面而保持棋盘不变，同时静音并重置动画时钟。

在实施之前写下计时器、移动危险和按下的按键的预期行为。然后在每种情况下切换离开并返回。这个小矩阵可以捕获错误，例如在游戏不可见时按键保持逻辑保持或计时器到期。

## 恢复游戏前重置计时

监听 visibilitychange 事件，并将暂停决策与绘制分开。返回时，把上一帧时间戳设为当前动画时间戳，或者标记恢复后的第一帧要重置时钟。否则，下一次增量可能包含整个隐藏时段，导致物体突然移动。

使用页面可见性 API，而不是仅依赖于模糊和焦点：窗口可能会在保持可见的情况下失去焦点，而可见性可表明文档是否实际上是隐藏的。保持任何自动保存策略的独立性；暂停行为和持久性有不同的目的，应该单独测试。

## 常见问题

**requestAnimationFrame 会继续在隐藏选项卡中运行吗？** 大多数浏览器会在后台选项卡或隐藏的 iframe 中暂停动画回调，并且计时器回调也可能受到限制。将这些行为视为处理可见性的原因，而不是作为精确的时钟。

**每个游戏在隐藏时都应该暂停吗？** 没有单一的政策适合所有的设计。当看不见的模拟改变挑战时暂停游戏；对于回合制游戏，保留当前棋盘就足够了。无论哪种情况，返回时都要故意重置计时和音频。

## 跟随好奇心探索

- [构建可靠的浏览器游戏循环](https://oneshotgems.ai/zh-Hans/topics/browser-game-loop): 构建浏览器游戏更新并围绕动画帧进行绘制，而不将模拟速度与玩家的显示刷新率联系起来。
- [使用增量时间，避免运动跳变](https://oneshotgems.ai/zh-Hans/topics/delta-time-in-games): 将经过的时间应用于游戏运动，选择安全的追赶策略，并在不同的刷新率和停顿后测试运动。

## 延伸阅读

- [MDN：页面可见性 API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)

---
规范页面: https://oneshotgems.ai/zh-Hans/topics/pausing-background-games