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

Ilmari Heikkinen
X 首頁

我們最近在 Chrome Canary 和開發人員版中推出 Pointer Lock API，向您致敬！等等，什麼？還沒聽過 Pointer Lock API 嗎？簡單來說，Pointer Lock API 可讓您為網路編寫適當的第一人稱射擊遊戲。

Chrome 實作模式可讓全螢幕網頁要求您授權擷取滑鼠遊標，因此您無法將遊標移到網頁之外。如此一來，網頁開發人員就能撰寫 3D 遊戲和應用程式，不必擔心滑鼠遊標移到網頁外。指標鎖定時，指標移動事件會定義 movementX 和 movementY 屬性，該屬性會指出自上次移動事件以來，滑鼠移動的程度。和往常使用出血邊緣 API 一樣，這些屬性會加上供應商前置字元，因此您需要使用 webkitMovementX，例如類似情況。

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

本網頁已提供幾個很實用的示範，幫助您善加利用這項功能。請參考 Brandon Jones 提供的 Quake 3 WebGL 示範，瞭解 Pointer Lock API 如何讓 WebGL FPS 遊戲成為可行的潛在客戶。另一個有趣的示範是使用 Webgl Street Viewer

如要開始使用 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>

您可以前往 html5-demos.com 查看更完整的範例。詳情請參閱：