Question

在寻找处理/ p5.js / javascript中锁定光标的方法时，我意识到即使我想到这一点，我也无法检测到鼠标移动。人们如何在典型的fps游戏中做到这一点？

Answer 1

您可以利用movementX/Y在光标锁定时仍然更新的内容。

启用指针锁定时，标准MouseEvent属性 clientX，clientY，screenX和screenY保持不变，就好像鼠标不动。 MovementX和movementY属性继续提供鼠标的位置变化。没有限制 moveX和movementY值，如果鼠标不断移入一个方向。鼠标光标的概念不存在光标无法移出窗口或被屏幕边缘夹住。

请注意，由于沙盒限制，下面的代码段无法在Stack Overflow上运行。请参阅：iframe limitations

const foo = document.getElementById("foo");
const button = document.getElementById("btn");
const dX = document.getElementById("x");
const dY = document.getElementById("y");

function lockPointer(elem) {
  if (elem.requestPointerLock) {
    elem.requestPointerLock();
  } else if (elem.webkitRequestPointerLock) {
    elem.webkitRequestPointerLock();
  } else if (elem.mozRequestPointerLock) {
    elem.mozRequestPointerLock();
  } else {
    console.warn("Pointer locking not supported");
  }
}

foo.addEventListener("mousemove", e => {
  const {
    movementX,
    movementY
  } = e;

  dX.innerHTML = movementX;
  dY.innerHTML = movementY;
});

btn.addEventListener("click", e => {
  lockPointer(foo);
});

#foo {
  width: 100px;
  height: 100px;
  background-color: black;
}

<canvas id="foo"></canvas>
<button id="btn">Lock</button>
<div>X: <span id="x"></span> | Y: <span id="y"></span></div>

游标锁定时如何获取mouseMovement？

1 个答案: