在HTML5小游戏开发中，暂停继续功能是提升用户体验的重要模块，其核心是通过状态管理控制游戏主循环的运行，同时配合界面切换展示不同的交互内容。实现该功能需要明确游戏的不同运行状态，再通过逻辑判断切换状态和对应界面。
一、游戏状态管理设计
首先需要定义游戏的所有运行状态，通常小游戏至少需要三种基础状态：运行中、暂停中、结束。我们可以通过一个全局的状态变量来管理当前游戏状态，所有逻辑判断都基于这个变量的值执行。
状态变量的定义示例如下：
// 定义游戏状态枚举
const GameState = {
RUNNING: 'running',
PAUSED: 'paused',
ENDED: 'ended'
};
// 全局游戏状态，初始为运行中
let currentGameState = GameState.RUNNING;
二、主循环控制逻辑
HTML5小游戏通常通过requestAnimationFrame实现主循环，暂停继续功能的核心就是控制主循环是否继续执行。当状态为暂停时，停止调用下一帧的渲染逻辑，当状态切换为运行时，重新启动主循环。
基础的主循环控制代码如下：
// 游戏主循环函数
function gameLoop() {
// 只有状态为运行时才执行游戏逻辑和渲染
if (currentGameState === GameState.RUNNING) {
// 更新游戏逻辑，比如角色位置、碰撞检测等
updateGameLogic();
// 渲染游戏画面
renderGame();
}
// 无论状态如何，都继续请求下一帧，方便状态切换后恢复
requestAnimationFrame(gameLoop);
}
// 启动游戏主循环
requestAnimationFrame(gameLoop);
三、暂停继续功能实现
1. 暂停功能触发
通常通过按键或者界面按钮触发暂停，触发后修改游戏状态为暂停，同时停止游戏内的定时器、音效等运行内容。
// 暂停游戏函数
function pauseGame() {
if (currentGameState === GameState.RUNNING) {
currentGameState = GameState.PAUSED;
// 停止游戏内的其他定时器，比如道具刷新定时器
clearInterval(propTimer);
// 暂停背景音效
bgAudio.pause();
}
}
// 监听暂停按键，比如按ESC键暂停
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
pauseGame();
}
});
2. 继续功能触发
暂停状态下点击继续按钮或者再次按对应按键，将状态切换为运行中，同时恢复定时器和音效。
// 继续游戏函数
function resumeGame() {
if (currentGameState === GameState.PAUSED) {
currentGameState = GameState.RUNNING;
// 恢复道具刷新定时器
propTimer = setInterval(generateProp, 3000);
// 恢复背景音效
bgAudio.play();
}
}
四、界面切换技巧
暂停时需要展示暂停界面，继续后隐藏暂停界面，这里可以通过控制DOM元素的显示隐藏实现，也可以通过canvas的层级绘制实现。
1. DOM元素切换方案
如果游戏界面是使用DOM元素构建的，可以直接控制暂停面板的display属性。
// 获取暂停面板元素
const pausePanel = document.getElementById('pausePanel');
// 暂停时显示暂停面板
function pauseGame() {
if (currentGameState === GameState.RUNNING) {
currentGameState = GameState.PAUSED;
pausePanel.style.display = 'block';
}
}
// 继续时隐藏暂停面板
function resumeGame() {
if (currentGameState === GameState.PAUSED) {
currentGameState = GameState.RUNNING;
pausePanel.style.display = 'none';
}
}
2. Canvas绘制切换方案
如果游戏是基于Canvas开发的，可以在渲染逻辑中根据状态判断是否绘制暂停界面。
// 渲染游戏函数
function renderGame() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制游戏正常内容
drawGameElements();
// 如果状态为暂停，绘制暂停界面
if (currentGameState === GameState.PAUSED) {
// 绘制半透明遮罩
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制暂停文字
ctx.fillStyle = '#fff';
ctx.font = '30px Arial';
ctx.textAlign = 'center';
ctx.fillText('游戏暂停', canvas.width / 2, canvas.height / 2);
// 绘制继续按钮
drawResumeButton();
}
}
五、注意事项
- 暂停时需要同时停止所有游戏相关的定时器，避免暂停后逻辑仍在后台运行
- 音效和背景音乐需要同步暂停，继续时恢复，避免声音和画面不同步
- 暂停界面需要保留继续、重新开始等常用操作入口，提升用户操作便利性
- 状态切换时需要做好边界判断，避免重复触发暂停或者继续逻辑导致状态异常