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