Как получить mouseMovement, когда курсор заблокирован? - PullRequest
Новая
       95

Как получить mouseMovement, когда курсор заблокирован?

0 голосов
/ 13 июня 2018

Ища способ заблокировать курсор в обработке / p5.js / javascript, я понял, что даже когда понял, что не смогу обнаружить движение мыши.Как люди делают это в типичных фпс играх?

1 Ответ

0 голосов
/ 13 июня 2018

Вы используете movementX/Y, которые все еще обновляются, пока курсор заблокирован.

См. Документацию MDN :

Когда блокировка указателя включена, стандартные свойства MouseEvent clientX, clientY, screenX и screenY остаются постоянными, как если бы мышь не двигалась.Свойства MoveX и MoveY продолжают обеспечивать изменение положения мыши.Нет ограничений на значения MoveX и MoveY, если мышь постоянно движется в одном направлении.Концепция курсора мыши не существует, и курсор не может сдвинуться с окна или быть зажат краем экрана.

Обратите внимание, что приведенный ниже фрагмент не будет работать в стекеПереполнение из-за ограничений в песочнице.См .: ограничения iframe 

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>
...