Pointer Lock API (API Khoá con trỏ) đưa trò chơi FPS lên trình duyệt

Ilmari Heikkinen
X Trang chủ

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: