requestPointerLock的用法和坑

在一些游戏场景中，需要素萍鼠标指针，比如射击类游戏，就需要锁定鼠标指针以获得更好的游戏体验。
浏览器提供了requestPointerLock方法来实现此功能，通过exitPointerLock来解除鼠标指针的锁定。

API

Element.requestPointerLock(options = {unadjustedMovement: false});

• options
  • unadjustedMovement: boolean

unadjustedMovement默认是false，表示不会关闭鼠标加速。
在射击类游戏中，可以选择关闭鼠标加速以获得更好的游戏体验。

使用方法

点击链接可以有详细的使用说明

使用中遇到的坑

问题

在线上的使用场景中，发现在鼠标锁定模式下，会有鼠标移动不均匀的情况。鼠标会在水平匀速移动的时候突然出现跳跃，水平方向或者垂直方向都有可能。

排查思路

首先怀疑是前端处理有问题，因为鼠标锁定后，最后发送的坐标都是绝对坐标，前端统计每次movementX和movementY，计算绝对坐标后再发送。但是通过console的方式看到mousemove触发的时候，统计到的movementX和movementY就是异常的。

问题原因

最终定位原因是chrome自身的bug，相关信息: https://bugs.chromium.org/p/chromium/issues/detail?id=934658#c2

解决问题

最终解决问题方式就是保存一个正常的MaxMovement的值。当mousemove触发的时候，判断如果movementX或者movementY的绝对值大于我们设定的MaxMovement的时候，就认为是异常值。此次mousemove事件不处理。