本頁面由 Cloud Translation API 翻譯而成。

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

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

François Beaufort

加速移動是使用滑鼠或觸控板移動螢幕上游標時的人體工學功能。它可讓游標以快速短暫的動作橫跨整個螢幕，同時提供精確的移動效果。具體來說，如果滑鼠移動的實際距離相同，移動速度越快，螢幕上的游標就會移動得越遠。

作業系統預設會啟用滑鼠加速功能。對於某些第一人稱視角遊戲 (通常是第一人稱射擊遊戲)，會使用原始滑鼠輸入資料控制攝影機旋轉，且不進行加速度調整。相同的物理動作 (無論速度快慢) 都會產生相同的旋轉效果。根據專業玩家的說法，這可帶來更優質的遊戲體驗和更高的準確度。

Windows 10 設定中指標動作控制選項的螢幕截圖。 — Windows 10 設定中的指標動作控制。

自 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()，即可停用 OS 層級的滑鼠加速調整功能，並存取原始滑鼠輸入內容。這樣一來，當游標鎖定時，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();
      }
    });
}

您可以切換加速和非加速滑鼠移動資料，而無須釋放指標鎖定。只要再次要求指標鎖定功能，並提供所需選項即可。如果要求失敗，原始鎖定將保持不變，且傳回的承諾會遭到拒絕。對於失敗的變更要求，系統不會觸發任何指標鎖定事件。

瀏覽器支援

指標鎖定 API 在各瀏覽器中皆獲得良好支援。不過，截至 2020 年 10 月，只有以 Chromium 為基礎的瀏覽器 (例如 Chrome、Edge 等) 支援停用系統層級的滑鼠加速調整功能。如需最新資訊，請參閱 MDN 的瀏覽器相容性表格。

作業系統支援

在 ChromeOS、macOS Catalina 10.15.1 和 Windows 上，可以停用系統層級的滑鼠加速調整功能。之後也會支援 Linux。

範例

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

實用連結

特別銘謝

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