如何实现游戏Div内光标锁定，仅暂停时允许移出？

核心逻辑 #

借助浏览器原生的Pointer Lock API，在游戏运行时将光标锁定在游戏容器内，暂停时主动释放锁定。该API会隐藏系统光标，同时持续提供鼠标移动的相对位移数据，完美适配你“移动场景模拟准星移动”的设计需求。

具体实现步骤 #

1. 触发光标锁定（游戏启动/恢复时） #

浏览器要求必须通过用户交互（如点击游戏区域、按下开始键）发起锁定请求，不能自动触发：

const gameContainer = document.getElementById('your-game-div');
let gameIsRunning = false;

// 绑定触发锁定的交互事件
gameContainer.addEventListener('click', () => {
  if (!document.pointerLockElement && gameIsRunning) {
    gameContainer.requestPointerLock();
  }
});

2. 处理鼠标移动更新场景 #

锁定激活后，mousemove事件会绑定到document上，通过movementX/movementY获取相对位移来移动场景：

document.addEventListener('mousemove', (e) => {
  if (document.pointerLockElement === gameContainer && gameIsRunning) {
    // 根据灵敏度计算场景偏移
    const sensitivity = 0.5;
    sceneX -= e.movementX * sensitivity;
    sceneY -= e.movementY * sensitivity;
    // 执行场景位置更新渲染
    updateScenePosition(sceneX, sceneY);
  }
});

3. 释放光标锁定（游戏暂停/结束时） #

进入暂停状态时主动退出锁定，让光标可自由移出容器：

function pauseGame() {
  gameIsRunning = false;
  if (document.pointerLockElement) {
    document.exitPointerLock();
  }
  // 显示暂停菜单等逻辑
  showPauseUI();
}

4. 监听锁定状态变化 #

处理用户按ESC键主动退出锁定的情况，同步更新游戏状态：

document.addEventListener('pointerlockchange', () => {
  if (!document.pointerLockElement) {
    // 用户主动退出锁定时自动暂停游戏
    gameIsRunning = false;
    showPauseUI();
  }
});

关键注意点 #

• 强制用户交互触发：浏览器安全限制，必须通过点击、按键等用户操作发起锁定请求。
• 自定义准星：Pointer Lock会隐藏系统光标，需在游戏容器内绘制固定位置的自定义准星（如居中十字线）。
• 兼容性：Chrome、Firefox、Edge等主流浏览器均支持该API，无需额外兼容层。

内容的提问来源于stack exchange，提问作者tkachas