停用滑鼠加速功能，提供更優質的 FPS 遊戲體驗

網頁應用程式現可在擷取指標事件時停用滑鼠加速功能。

François Beaufort

加速移動是使用滑鼠或觸控板移動螢幕上游標時的人體工學功能。它可讓指標以快速短暫的動作橫跨整個螢幕，同時提供精確的移動效果。具體來說，對於您移動滑鼠的相同實際距離，如果移動距離較快，畫面上的指標會進一步移動。

作業系統預設為啟用滑鼠加速功能。對於某些第一人稱視角遊戲 (通常是第一人稱射擊遊戲)，會使用原始滑鼠輸入資料控制攝影機旋轉，且不進行加速度調整。相同的物理動作 (無論速度快慢) 都會產生相同的旋轉效果。這種做法可以獲得更出色的遊戲體驗，也能獲得專業玩家的建議。

自 Chrome 88 版起，由於更新的指標鎖定 API，網頁應用程式可以切換使用加速和非加速的滑鼠移動資料。

Google Stadia 和 Nvidia GeForce Now 等網路遊戲平台已採用這些新功能，滿足第一人稱射擊遊戲玩家的需求。

使用 API

要求游標鎖定

當電腦應用程式隱藏指標圖示，並將滑鼠動作解讀為其他動作時 (例如在 3D 世界中四處查看)，就會使用指標鎖定這個標準術語。

mousemove 文件事件中的 movementX 和 movementY 屬性會顯示滑鼠指標自上次移動事件後移動的程度。不過，當游標移出網頁時，這些值就不會更新。

document.addEventListener("mousemove", (event) => {
  console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});

擷取滑鼠游標 (或要求鎖定游標) 後，您就不必擔心游標會移出畫面。這對於沉浸式網頁遊戲特別實用。遊標鎖定時，所有滑鼠事件都會傳送至指標鎖定的目標元素。

在目標元素上呼叫 requestPointerLock() 以要求指標鎖定，並監聽 pointerlockchange 和 pointerlockerror 事件以監控指標鎖定變更。

const myTargetElement = document.body;

// Call this function to request a pointer lock.
function requestPointerLock() {
  myTargetElement.requestPointerLock();
}

document.addEventListener("pointerlockchange", () => {
  if (document.pointerLockElement) {
    console.log(`pointer is locked on ${document.pointerLockElement}`);
  } else {
    console.log("pointer is unlocked");
  }
});

document.addEventListener("pointerlockerror", () => {
  console.log("pointer lock error");
});

停用滑鼠加速功能

使用 { unadjustedMovement: true } 呼叫 requestPointerLock() 可停用作業系統層級的滑鼠加速調整功能，並存取原始滑鼠輸入內容。這樣一來，在指標鎖定時，來自 mousemove 事件的滑鼠移動資料就不會包含滑鼠加速功能。

請使用 requestPointerLock() 傳回的新承諾，確認要求是否成功。

function requestPointerLockWithUnadjustedMovement() {
  const promise = myTargetElement.requestPointerLock({
    unadjustedMovement: true,
  });

  if (!promise) {
    console.log("disabling mouse acceleration is not supported");
    return;
  }

  return promise
    .then(() => console.log("pointer is locked"))
    .catch((error) => {
      if (error.name === "NotSupportedError") {
        // Some platforms may not support unadjusted movement.
        // You can request again a regular pointer lock.
        return myTargetElement.requestPointerLock();
      }
    });
}

您可以切換加速和非加速滑鼠移動資料，而無須釋放指標鎖定。只要使用所需選項，再次要求指標鎖定即可如果要求失敗，原始鎖定將維持不變，傳回的承諾則會拒絕。變更要求失敗時，系統不會觸發指標鎖定事件。

瀏覽器支援

Pointer Lock API 可確實支援所有瀏覽器。不過，在 2020 年 10 月開始，只有 Chromium 型瀏覽器 (例如 Chrome、Edge 等) 支援停用作業系統層級的滑鼠加速調整功能。如需最新資訊，請參閱 MDN 的瀏覽器相容性表格。

作業系統支援

ChromeOS、macOS Catalina 10.15.1 和 Windows 支援停用作業系統層級滑鼠加速調整功能。之後也會支援 Linux。

範例

您可以在 Glitch 上執行範例，體驗 Pointer Lock API。請務必查看原始碼。

實用連結

• 說明
• 規格 PR
• GitHub 存放區
• ChromeStatus 項目
• Chrome 追蹤錯誤
• 出貨意圖
• Mozilla 的位置
• WebKit 的位置

特別銘謝

感謝 James Hollyer、Thomas Steiner、Joe Medley、Kayce Basques 和 Vincent Scheib 審查本文。