Hãy tận hưởng API Pointer Lock gần đây đã có mặt trên Chrome Canary và Kênh nhà phát triển! Chờ đã, gì cơ? Bạn chưa nghe nói về API Khoá con trỏ? Tóm lại, Pointer Lock API giúp bạn có thể viết các trò chơi bắn súng góc nhìn thứ nhất phù hợp cho web.
Triển khai Chrome cho phép trang web toàn màn hình yêu cầu bạn cấp quyền thu thập con trỏ chuột để bạn không thể di chuyển con trỏ ra ngoài trang. Điều này cho phép các nhà phát triển web viết ứng dụng và trò chơi 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ỏ có các thuộc tính movementX
và movementY
được xác định để cho biết chuột đã di chuyển bao nhiêu lần kể từ sự kiện di chuyển gần đây nhất. Như thường lệ với các API cập nhật, các thuộc tính này có tiền tố nhà cung cấp, vì vậy, bạn cần sử dụng webkitMovementX
và tương tự như vậy.
Để bật Pointer Lock API trong các bản dựng Chrome hiện tại, cách dễ nhất là truy cập vào about:flags
và bật cờ "Enable Pointer Lock". 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
.
Đã có một số bản minh hoạ thú vị tận dụng tính năng này. Tham khảo bản minh hoạ Quake 3 WebGL của Brandon Jones để xem cách Pointer Lock API biến trò chơi WebGL FPS thành 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 API Khoá con trỏ, dưới đây là một đoạn mã nhỏ được ghi lại 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>
Bạn có thể xem ví dụ đầy đủ hơn tại html5-demos.com. Để biết thêm thông tin, hãy xem:
- Bài đăng trên blog của Vincent Scheib (trình chỉnh sửa thông số kỹ thuật)
- Tài liệu MMDN
- Thông tin cụ thể về W3C