API Pointer Lock недавно появился в Chrome Canary и на канале Dev, радуйтесь! Подожди, что? Вы еще не слышали об API Pointer Lock? Короче говоря, API Pointer Lock позволяет писать настоящие шутеры от первого лица для Интернета.
Реализация Chrome позволяет полноэкранной веб-странице запрашивать ваше разрешение на захват указателя мыши, чтобы вы не могли переместить его за пределы страницы. Это позволяет веб-разработчикам писать 3D-игры и приложения, не беспокоясь о том, что курсор мыши выйдет за пределы страницы. Когда указатель заблокирован, для событий перемещения указателя определены атрибуты movementX и movementY , которые сообщают, насколько переместилась мышь с момента последнего события перемещения. Как обычно в передовых API, эти атрибуты имеют префикс поставщика, поэтому вам необходимо использовать webkitMovementX и тому подобное.
Чтобы включить API блокировки указателя в текущих сборках Chrome, самый простой способ — перейти к about:flags и включить флаг «Включить блокировку указателя». Вы также можете включить его, запустив Chrome с помощью флага командной строки --enable-pointer-lock .
Уже есть пара классных демоверсий, использующих эту функцию. Посмотрите демо-версию Quake 3 WebGL от Брэндона Джонса, чтобы увидеть, как API Pointer Lock делает игры WebGL FPS жизнеспособной перспективой. Еще одна классная демонстрация — Webgl Street Viewer.
Чтобы начать работу с API Pointer Lock, вот небольшой фрагмент, взятый из 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>