पॉइंटर लॉक एपीआई हाल ही में Chrome Canary और डेव चैनल में लॉन्च हुआ है. सभी लोग खुश हो जाएं! रुकिए, क्या? क्या आपने पॉइंटर लॉक एपीआई के बारे में नहीं सुना है? कम शब्दों में कहें, तो Pointer Lock API की मदद से, वेब के लिए फ़र्स्ट-पर्सन शूटर गेम बनाए जा सकते हैं.
Chrome में इस सुविधा के लागू होने से, फ़ुल-स्क्रीन वेबपेज आपसे माउस पॉइंटर कैप्चर करने की अनुमति मांग सकता है, ताकि आप उसे पेज से बाहर न ले जा सकें. इससे वेब डेवलपर, 3D गेम और ऐप्लिकेशन लिख सकते हैं. इसके लिए, उन्हें इस बात की चिंता नहीं करनी पड़ती कि माउस कर्सर पेज से बाहर निकल जाएगा या नहीं. जब पॉइंटर लॉक होता है, तो पॉइंटर मूव इवेंट में movementX और movementY एट्रिब्यूट तय होते हैं. इनसे पता चलता है कि पिछले मूव इवेंट के बाद, माउस कितनी दूर चला गया. आम तौर पर, नए एपीआई में इन एट्रिब्यूट के नाम के आगे वेंडर का नाम होता है. इसलिए, आपको webkitMovementX और इस तरह के अन्य एट्रिब्यूट का इस्तेमाल करना होगा.
Chrome के मौजूदा बिल्ड में Pointer Lock API को चालू करने का सबसे आसान तरीका यह है कि about:flags पर जाएं और "Pointer Lock चालू करें"-फ़्लैग को चालू करें. --enable-pointer-lock कमांड लाइन फ़्लैग का इस्तेमाल करके, Chrome को शुरू करके भी इसे चालू किया जा सकता है.
इस सुविधा का फ़ायदा उठाने के लिए, पहले से ही कुछ शानदार डेमो उपलब्ध हैं. ब्रैंडन जोन्स का Quake 3 WebGL डेमो देखें और जानें कि Pointer Lock API, WebGL एफ़पीएस गेम को कैसे बेहतर बनाता है. WebGL Street Viewer एक और शानदार डेमो है
Pointer Lock API का इस्तेमाल शुरू करने के लिए, 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>