API Pointer Lock переносит игры FPS в браузер

Ilmari Heikkinen

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>

Более полный пример можно увидеть на сайте html5-demos.com . Для получения дополнительной информации посмотрите: