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