Pointer Lock API 將每秒影格數遊戲導入瀏覽器

Ilmari Heikkinen
X 首頁

Pointer Lock API 近期已在 Chrome Canary 和開發人員版推出，歡迎大家一起來體驗！等等，您還不瞭解 Pointer Lock API？簡單來說，Pointer Lock API 可讓您為網路編寫適當的第一人稱射擊遊戲。

Chrome 實作方式可讓全螢幕網頁要求您授權擷取滑鼠游標，以便您無法將滑鼠游標移至網頁外。這可讓網頁開發人員撰寫 3D 遊戲和應用程式，不必擔心滑鼠游標會移動到網頁外。當指標鎖定時，指標移動事件會定義 movementX 和 movementY 屬性，用於指出滑鼠自上次移動事件以來移動的距離。如同新推出的 API 一樣，這些屬性會加上供應商前置字元，因此您需要使用 webkitMovementX 之類的字元。

如要在目前的 Chrome 版本中啟用 Pointer Lock API，最簡單的方法是前往 about:flags，然後開啟「Enable Pointer Lock」標記。您也可以使用 --enable-pointer-lock 指令列標記啟動 Chrome，開啟這項功能。

目前已有幾個運用這項功能的炫麗示範。請參閱 Brandon Jones 的 Quake 3 WebGL 示範，瞭解 Pointer Lock API 如何讓 WebGL FPS 遊戲成為可行的前景。另一個很酷的示範是 Webgl 街景檢視器

如要開始使用 Pointer Lock API，請參考以下從 MDN 擷取的程式碼片段：

<button onclick="document.body.webkitRequestFullScreen();">No, you lock it up!</button>
<script>
navigator.pointer = navigator.pointer || navigator.webkitPointer;

var onError = function() {
    console.log("Mouse lock was not successful.");
};

document.addEventListener('webkitfullscreenchange', function(e) {
    if (document.webkitIsFullScreen) {
    navigator.pointer.lock(document.body, function() {
        // Locked and ready to play.
    }, onError);
    }
}, false);

document.body.addEventListener('webkitpointerlocklost', function(e) {
    console.log('Pointer lock lost!');
}, false);

document.body.addEventListener('mousemove', function(e) {
    if (navigator.pointer.isLocked) { // got a locked pointer
    var movementX = e.movementX || e.webkitMovementX;
    var movementY = e.movementY || e.webkitMovementY;
    }
}, false);
</script>