HTML5 Pointer Lock API дозволяє вам приховувати покажчик миші з поля зору
Браузери поступово стають повноцінними ігровими платформами. Завдяки HTML5 і javascript стала можлива розробка комплексних програм, хоча для цього поки що потрібно багато зусиль. Деякі типи ігор мають на увазі управління процесів за допомогою клавіатури, і в такому випадку постійно миготливий на екрані покажчик миші може дратувати. Тепер ви можете скористатися новим Pointer Lock API, щоб приховувати вказівник у разі потреби.
Pointer Lock API: з легкістю приховуємо та відображаємо покажчик миші
Метод "requestPointerLock()", прив'язаний до випадкового елемента, просить браузер приховати покажчик миші. Браузер робить це, але не без допомоги користувача. Це означає, що ви не можете приховати курсор під час завантаження сторінки. Натомість, доведеться скористатися хоча б подією “click”, щоб покажчик зник.
У нашому прикладі покажчик ховається як тільки користувач натискає на елемент 'canvas'. Подібно до того, як браузери працюють з Fullscreen API, з'явиться спливаюче вікно, в якому буде сказано, що Pointer Lock API намагається приховати курсор, і що повернути його можна, натиснувши клавішу ESC.
Поки покажчик деактивований (або прихований), він залишається на тому самому місці, де ви його залишили. Жодний рух не пересуне покажчик з того місця. Це також передбачає неможливість забрати курсор за межі вікна браузера. Однак браузер, як і раніше, буде реагувати на натискання клавіш миші.
Щоб повернути вказівник назад, потрібно скористатися методом exitPointerLock(). Використовуючи його разом із параметром “pointerLockElement”, ми можемо приховувати та відображати покажчик, клацнувши по елементу, до якого прив'язана необхідна операція.Як тільки курсор буде прихований, значенням pointerLockElement стане DOM-елемент, на який і веде API. В інших випадках значення буде “null”. За допомогою, наприклад, “pointerLockElement.nodeName” ми можемо запросити назву елемента – у нашому випадку, ми використовуємо “CANVAS” як значення.
У цьому прикладі ми перевіряємо, чи має “pointerLockElement” значення null. Таким чином, ми перевіряємо, чи прихований покажчик миші, чи відображено. "requestPointerLock()" або "exitPointerLock()" виконуються відповідним чином. На відміну від “requestPointerLock()”, “exitPointerLock()” не вимагає будь-яких дій від користувача. Нам не потрібно розпочинати метод за допомогою події “click”.
Коли “requestPointerLock()” можна прив'язати до будь-якого елементу, “exitPointerLock()” необхідно прив'язувати до “document”. Не забудьте проставити необхідні приставки, тому що Pointer Lock API - це дещо нове. "webkitRequestPointerLock()" та "webkitExitPointerLock()" зроблять все необхідне.
Просунуте використання Pointer Lock API: визначаємо рух покажчика миші
Разом з Pointer Lock API ми отримали два нових параметри визначення руху вказівника миші. На даний момент у нас є можливість запросити координати покажчика (всередині вікна браузера) за допомогою event-параметрів "clientX" та "clientY". Нові параметри “movementX” та “movementY” роблять трохи більше – вони здатні визначати рух вказівника миші, а не просто його розташування.
У цьому прикладі ми дозволяємо події “mousemove” запустити функцію, яка вписує останні значення “clientX” та “movementX” у заголовок документа. В той час, як “clientX” повідомляє нам значення розташування на момент запиту, “movementX” повідомляє нам про рух покажчика по осі X,щодо останнього запуску функції. Що швидше рухається покажчик, то вище піднімається значення “movementX”. Рух праворуч (movementX) і вниз (movementY) завжди видасть у відповідь позитивне значення, а переміщення вліво і вгору буде видавати негативні значення. Якщо руху немає взагалі, то значення залишиться на 0.
У разі значення “clientX” і “clientY” залишаться незмінними. Вони будуть ті значення, які були виставлені під час деактивації. Параметри “movementX” та “movementY” не мають жодних залежностей від Pointer Lock API, і їх також можна використовувати з цілком видимими покажчиками.
Не забувайте використовувати правильні приставки до нових параметрів. Наприклад, разом із “webkitMovementX” та “webkitMovementY”.
Pointer-Lock-API та непередбачені ситуації: реагування на зміни статусу та помилки
Pointer Lock API знайомий із двома слухачами подій. Перший називається "pointerlockchange", і він завжди виконує функцію або при приховуванні, або при відображенні покажчика миші.
Цей приклад веде до діалогового вікна, яке буде показано як при прихованні, так і відображення покажчика. Використовуючи параметр “pointerLockElement”, ми визначаємо останній статус і відкриваємо відповідне повідомлення.
Другий слухач подій, “pointerlockerror” дозволяє нам реагувати на помилки, які можуть статися в процесі приховування або відображення вказівника миші. Як ми вже зазначили раніше, браузер реагуватиме лише на приховування покажчика, оскільки метод “requestPointerLock()” запускається за допомогою події “click”. Якщо ми запустимо "requestPointerLock()" за допомогою "load", браузер не відреагує на приховування, і натомість запуститься "pointerlockerror".
“pointerlockchange” та"pointerlockerror" реагують на специфічні для браузерів варіанти як "webkitpointerlockchange" та "webkitpointerlockerror".
На момент написання цієї статті, Pointer Lock API підтримується настільними версіями Chrome та Firefox. Мобільні браузери абсолютно не підтримують цей API, навіть мобільні версії Chrome та Firefox не здатні надати відповідну підтримку. Так як API має великий вплив у сфері ігор, є ймовірність, що людям доведеться встановлювати вказані браузери, щоб мати можливість із задоволенням пограти у щось. Якщо й надалі буде рух у цьому напрямку, варто очікувати, що відповідна підтримка з'явиться у всіх популярних браузерах.