गेमपैड के साथ इंटरनेट सर्फिंग (जावास्क्रिप्ट)

मेज पर बैठे, आप सोफे पर बैठते समय माउस और कीबोर्ड का उपयोग करते हैं - सबसे अधिक संभावना है कि लैपटॉप का टचपैड या टैबलेट का टचस्क्रीन। तुम भी लीप मोशन का उपयोग करें और इशारों के साथ अपने कंप्यूटर को नियंत्रित कर सकते हैं। जैसा कि आप पहले से ही समझ चुके हैं, इंटरनेट पर सर्फ करने और अपने कंप्यूटर को प्रबंधित करने के कई तरीके हैं। एक गेमपैड उनमें से एक हो सकता है।

इस लेख में, मैं आपके साथ साझा करूँगा:

• गेमपैड को ब्राउज़र से कनेक्ट करें
• गेमपैड इवेंट्स को सुनें
• गेमपैड का उपयोग करते हुए पृष्ठ तत्वों पर नियंत्रण केंद्रित करें
• कंपन के रूप में प्रतिक्रिया दें

USB या ब्लूटूथ का उपयोग करके अपने गेमपैड को कनेक्ट करें और शुरू करें।

गेमपैड एपीआई

HTML 5 मानक में एक एपीआई गेमपैड जोड़ा गया है। एपीआई एक ब्राउज़र में गेमपैड के उपयोग की अनुमति देता है। एक तत्व के संयोजन में, इस एपीआई का उपयोग गेम बनाने के लिए किया जा सकता है जो गेमपैड का समर्थन करता है। इसलिए, उपयोगकर्ता गेमपैड का उपयोग करके सीधे ब्राउज़र में गेम खेल सकते हैं, जो बहुत अच्छा है। लेकिन एपीआई का इस्तेमाल न केवल गेम्स के लिए किया जा सकता है। कोई भी आपको पूरी तरह से अलग-अलग उद्देश्यों के लिए गेमपैड के रूप में एक इनपुट डिवाइस बनाने से नहीं रोक रहा है।

गेमपैड एपीआई अच्छी तरह से समर्थित है , लेकिन अभी भी मसौदा चरण में है। शायद कुछ बदल जाएगा, भविष्य में हटा दिया जाएगा या जोड़ा जाएगा।

हम एक गेमपैड कनेक्ट करते हैं

जब गेमपैड यूएसबी या ब्लूटूथ का उपयोग करके कंप्यूटर से कनेक्ट होता है, तो कनेक्शन और डिस्कनेक्ट को संभालने के लिए हम दो घटनाओं का उपयोग कर सकते हैं:

window.addEventListener('gamepadconnected', function(event) { // , -   console.log(event) }); window.addEventListener('gamepaddisconnected', function(event) { // , -   }); 

बटन दबाने के बाद ही गेमपैड काम करना शुरू कर देगा (लगभग अनुवाद करें या प्रारंभ करें)। तथ्य यह है कि यह ब्राउज़र की सुरक्षा / गोपनीयता है। इसलिए, काम शुरू करने के लिए एक बटन दबाने की आवश्यकता के बारे में उपयोगकर्ता को सूचित करने वाले इंटरफ़ेस पर विचार करना आवश्यक है।

गेमपैड इवेंट कंसोल में निम्नानुसार हैं:

गेमपैड लेआउट: बटन और कुल्हाड़ियों

जैसा कि आप देख सकते हैं, इवेंट लॉग में बटन (0 - 16) और कुल्हाड़ियों (कुल्हाड़ियों 0 - 3) का एक गुच्छा है। लेकिन आपको कैसे पता चलेगा कि बटन नंबर के पीछे कैसे छिपे हैं? गेमपैड में ब्रांड के आधार पर अलग-अलग लेआउट हैं। इसलिए, आपको इंटरनेट पर जानकारी खोजनी चाहिए। इस स्थिति में, हम Xbox One गेमपैड को कनेक्ट करते हैं और इसमें यह लेआउट है:

कीस्ट्रोके सुनें

इंटरफेस विकसित करते समय, आप एक कीस्ट्रोक पर एक घटना जोड़ने के लिए .addEventListener() का उपयोग कर सकते हैं। इस स्थिति में, यह नहीं किया जा सकता है, क्योंकि नियंत्रक पर बटन ईवेंट नहीं बनाते हैं। और जैसा कि आप ऊपर लॉग से देख सकते हैं, आपको मैन्युअल रूप से pressed फ़ील्ड की जांच करनी होगी:

 const xBoxButtonB = gamepad.buttons[1] if (xBoxButtonB.pressed) { doSomethingOnButtonPress(); } 

चूंकि हम हर समय सत्यापन करना चाहते हैं, इसलिए हमें इसे सभी को लूप में लपेटने की आवश्यकता है। उदाहरण के लिए requestAnimationFrame का उपयोग कर:

 const rAF = window.mozRequestAnimationFrame || window.requestAnimationFrame; window.addEventListener('gamepadconnected', function() { updateLoop(); }); function updateLoop() { //    rAF(updateLoop); } 

आइटम के बीच नेविगेशन

वेब पेज को नेविगेट करने के लिए गेमपैड का उपयोग करने के लिए, आपको कीबोर्ड का अनुकरण करना होगा। लेकिन पहले आपको पृष्ठ पर सभी तत्वों को प्राप्त करने की आवश्यकता है जो ध्यान केंद्रित कर सकते हैं।
निम्नलिखित चयनकर्ता का उपयोग करके, आप इन सभी तत्वों को प्राप्त कर सकते हैं:

 const focusableElements = document.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); 

प्रोग्राम को फोकस करते हुए आगे बढ़ें

तत्व पर ध्यान केंद्रित करने के लिए, हम NodeList माध्यम से लूप करेंगे और element.focus() focus element.focus() विधि का उपयोग करके वर्तमान तत्व पर ध्यान केंद्रित करेंगे।

यह उदाहरण दिखाता है कि आप तत्व से तत्व में कैसे कूद सकते हैं:

 let current; function updateLoop() { const gamepad = navigator.getGamepads()[0] const gamepadBumperL = gamepad.buttons[4] const gamepadBumperR = gamepad.buttons[5] if (gamepadBumperL.pressed) { prevItem(current) } if (gamepadBumperR.pressed) { nextItem(current) } setTimeout(() => rAF(updateLoop), 100) } function prevItem(index) { current = (index - 1) % focusableElements.length focusableElements[current].focus() } function nextItem(index) { current = (index + 1) % focusableElements.length focusableElements[current].focus() } 

setTimeout फ़ंक्शन के उपयोग पर ध्यान दें। इसका उपयोग requestAnimationFrame को 100 मिलीसेकंड तक सीमित करने के लिए किया जाता है। इसके बिना, कुंजी पर एक सिंगल क्लिक कई गेमपैड घटनाओं को उत्पन्न कर सकता है, क्योंकि हमारे पास कोई भी परिचित व्यक्ति नहीं है, और एक मिलीसेकंड में कुंजी को दबाने और जारी करने के लिए शारीरिक रूप से असंभव है।

तत्वों पर क्लिक करें

आप click() विधि का उपयोग कर तत्वों पर click() कर click() :

 clickItem(index) { focusableElements[index].click(); } 

कंपन का उपयोग करके प्रतिक्रिया जोड़ें

आधुनिक गेमपैड कंपन कर सकते हैं। ये कंपन उपयोगकर्ता के फीडबैक के लिए उपयोग किए जाते हैं, आमतौर पर खेलों में। लेकिन आप पृष्ठ पर वेब तत्वों से प्रतिक्रिया देने का भी प्रयास कर सकते हैं।

गेमपैड अक्सर दो इलेक्ट्रिक मोटर्स से सुसज्जित होते हैं, शक्तिशाली और कमजोर:

हम इन मोटर्स को एक ब्राउज़र से वाइब्रेटर का उपयोग करके नियंत्रित कर सकते हैं।
कंपन बनाने के लिए, हम playEffect() विधि का उपयोग कर सकते हैं:

 gamepad.vibrationActuator.playEffect('dual-rumble', { startDelay: 0, // Add a delay in milliseconds duration: 1000, // Total duration in milliseconds weakMagnitude: 0.5, // intensity (0-1) of the small ERM strongMagnitude: 1 // intesity (0-1) of the bigger ERM }); 

कंपन के लिए मोटर्स का उपयोग करते समय, याद रखें कि बड़ी मोटर को तेज करने के लिए अधिक समय चाहिए। इसलिए, अल्पकालिक प्रतिक्रियाओं के लिए, एक छोटी मोटर का उपयोग करना बेहतर होता है।

निष्कर्ष

इस उदाहरण में, हमने गेमपैड एपीआई के बुनियादी कार्यों की जांच की और इसका उपयोग इंटरनेट पर नेविगेट करने के लिए कैसे किया जा सकता है।

GitHub कोड और डेमो यहां देखा जा सकता है ।

उपयोगी लिंक

html5gamepad.com - गेमपैड चेकर टूल
एमडीएन पर गेमपैड एपीआई