This is the 23rd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The Pointer Lock API is used to provide access to the raw mouse movement, Lock the target of mouse events to a single element, remove distance restrictions on mouse movement in a single direction, and remove the cursor from the view. Often used in first-person or real-time strategy games.

Can I Use supports Pointer Lock API

methods

Extend DOM elements by adding a new requestPointerLock method. It is similar to the Fullscreen API, but it still needs to be prefixed by the manufacturer, for example:

elem.webkitRequestPointerLock() // Chrome
elem.mozRequestPointerLock() // Firefox
Copy the code

The event

Pointerlockchange event – when the pointerlock state changes – for example, when requestPointerLock is called, exitPointerLock, the user presses the ESC key, and so on. – The Pointerlockchange event is distributed to document. This is a simple event and does not contain any additional data.

document.addEventListener('pointerlockchange', pointerLockChange)
document.addEventListener('mozpointerlockchange', pointerLockChange)
document.addEventListener('webkitpointerlockchange', pointerLockChange)
Copy the code

Pointerlockerror events – Pointerlockerror events are distributed to the Document when an error is raised by a call to requestPointerLock or exitPointerLock. This is a simple event and does not contain any additional data.

document.addEventListener('pointerlockerror', pointerLockError)
document.addEventListener('mozpointerlockerror', pointerLockError)
document.addEventListener('webkitpointerlockerror', pointerLockError)
Copy the code

The sample

Here’s an example from MDN, which you can see at 👉.

// We will make it full screen and pointer to locked elements.
var elem;

document.addEventListener(
  "mousemove".function (e) {
    var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0,
      movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;

    // Prints the incremental value of mouse movement.
    console.log("movementX=" + movementX, "movementY=" + movementY);
  },
  false
);

function fullscreenChange() {
  if (
    document.webkitFullscreenElement === elem ||
    document.mozFullscreenElement === elem ||
    document.mozFullScreenElement === elem
  ) {
    // Older APIS capitalized 'S'.
    // The element is in full-screen mode, now we can request pointer locking.elem.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock; elem.requestPointerLock(); }}document.addEventListener("fullscreenchange", fullscreenChange)
document.addEventListener("mozfullscreenchange", fullscreenChange)
document.addEventListener("webkitfullscreenchange", fullscreenChange)

function pointerLockChange() {
  if (
    document.mozPointerLockElement === elem ||
    document.webkitPointerLockElement === elem
  ) {
    console.log("Pointer lock succeeded.");
  } else {
    console.log("Pointer lock lost."); }}document.addEventListener("pointerlockchange", pointerLockChange)
document.addEventListener("mozpointerlockchange", pointerLockChange)
document.addEventListener("webkitpointerlockchange", pointerLockChange)

function pointerLockError() {
  console.log("Error locking pointer.");
}

document.addEventListener("pointerlockerror", pointerLockError)
document.addEventListener("mozpointerlockerror", pointerLockError)
document.addEventListener("webkitpointerlockerror", pointerLockError)

function lockPointer() {
  elem = document.getElementById("pointer-lock-element");
  // Start by putting the element in full-screen mode. Current implementation
  // Requires the element to be in full-screen mode before requesting pointer locking
  // -- This may change in the future.
  elem.requestFullscreen =
    elem.requestFullscreen ||
    elem.mozRequestFullscreen ||
    elem.mozRequestFullScreen || // Older apis capitalize 'S'
    elem.webkitRequestFullscreen;
  elem.requestFullscreen();
}
Copy the code