Pointer Lock API (API khoá con trỏ) mới đây đã ra mắt trên Chrome Canary và kênh nhà phát triển. Chúc mừng tất cả! Chờ đã, gì cơ? Bạn chưa nghe nói về Pointer Lock API? Tóm lại, Pointer Lock API cho phép bạn viết các trò chơi bắn súng góc nhìn người thứ nhất phù hợp cho web.
Khi triển khai Chrome, trang web toàn màn hình sẽ yêu cầu bạn cấp quyền chụp con trỏ chuột để bạn không thể di chuyển con trỏ ra khỏi trang. Điều này cho phép nhà phát triển web viết các trò chơi và ứng dụng 3D mà không phải lo lắng về việc con trỏ chuột di chuyển ra ngoài trang. Khi con trỏ bị khoá, các sự kiện di chuyển con trỏ sẽ có các thuộc tính movementX và movementY được xác định để cho biết chuột đã di chuyển bao xa kể từ sự kiện di chuyển gần đây nhất. Như thường lệ với các API mới nhất, các thuộc tính này có tiền tố của nhà cung cấp, vì vậy, bạn cần sử dụng webkitMovementX và các thuộc tính tương tự.
Để bật Pointer Lock API trong các bản dựng Chrome hiện tại, cách dễ nhất là chuyển đến about:flags rồi bật cờ "Enable Pointer Lock" (Bật tính năng khoá con trỏ). Bạn cũng có thể bật tính năng này bằng cách khởi động Chrome bằng cờ dòng lệnh --enable-pointer-lock.
Hiện đã có một vài bản minh hoạ thú vị tận dụng tính năng này. Hãy xem bản minh hoạ Quake 3 WebGL của Brandon Jones để biết cách Pointer Lock API giúp các trò chơi FPS WebGL trở thành một triển vọng khả thi. Một bản minh hoạ thú vị khác là Trình xem đường phố Webgl
Để bắt đầu với Pointer Lock API, sau đây là một đoạn mã nhỏ được lấy từ 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>