अपने गेमपैड से Chrome Dino गेम खेलें

अपने वेब गेम को और बेहतर बनाने के लिए, Gamepad API का इस्तेमाल करने का तरीका जानें.

Thomas Steiner

Chrome का ऑफ़लाइन पेज पर छिपी हुई मज़ाकिया चीज़, इतिहास के सबसे ख़राब रहस्यों में से एक है ([citation needed], लेकिन नाटकीय प्रभाव के लिए किया गया दावा). अगर आप space कुंजी या मोबाइल पर दबाते हैं डायनासॉर पर टैप करें, ऑफ़लाइन पेज एक खेलने लायक आर्केड गेम बन जाता है. शायद आपको पता हो जब आपको गेम खेलने का मन करे, तब आपको ऑफ़लाइन होने की ज़रूरत नहीं है: Chrome में, आप बस नेविगेट करने के लिए about://dino तक या अपने दोस्त के लिए about://network-error/-106 पर ब्राउज़ करें. हालाँकि, क्या आपको पता है ऐसे कई तरीके हैं हर महीने 27 करोड़ Chrome Dino गेम खेले जाते हैं?

खेलने के लिए स्पेस बटन दबाएं!

एक और तथ्य जो यकीनन जानने के लिए ज़्यादा उपयोगी है और जिसके बारे में आपको शायद पता न हो आर्केड मोड में गेमपैड का इस्तेमाल करके गेम खेला जा सकता है. गेमपैड की सुविधा करीब एक साल पहले, लेखन के समय एक अच्छी प्रतिक्रिया करें: रेली ग्रांट. जैसा कि आपने इस गेम को देखा है, बाकी गेम की तरह Chromium का प्रोजेक्ट पूरी तरह से ओपन सोर्स हो. तय सीमा में तो हम आपको Gamepad API को इस्तेमाल करने का तरीका दिखाना चाहते हैं.

Gamepad API का इस्तेमाल करना

ध्यान दें: Gamepad API का इस्तेमाल लंबे समय से किया जा रहा है. इस पोस्ट में, लेगसी सुविधाओं और वेंडर प्रीफ़िक्स का इस्तेमाल नहीं किया गया है.

सुविधा की पहचान और ब्राउज़र समर्थन

Gamepad API के साथ इन दोनों डिवाइसों पर, दुनिया भर में बेहतरीन ब्राउज़र सपोर्ट मिलता है डेस्कटॉप और मोबाइल. यहां दिए गए स्निपेट का इस्तेमाल करके, यह पता लगाया जा सकता है कि Gamepad API काम करता है या नहीं:

if ('getGamepads' in navigator) {
  // The API is supported!
}

ब्राउज़र किसी गेमपैड को कैसे दिखाता है

ब्राउज़र, गेमपैड को Gamepad के तौर पर दिखाता है ऑब्जेक्ट हैं. Gamepad में ये प्रॉपर्टी होती हैं:

• id: गेमपैड की पहचान करने वाली स्ट्रिंग. इस स्ट्रिंग से प्रॉडक्ट के ब्रैंड या स्टाइल की पहचान होती है कनेक्ट किया गया गेमपैड डिवाइस.
• displayId: VRDisplay.displayId जुड़ा VRDisplay (अगर ज़रूरी हो).
• index: नेविगेटर में गेमपैड का इंडेक्स.
• connected: यह बताता है कि गेमपैड अब भी सिस्टम से कनेक्ट है या नहीं.
• hand: एक ईनम जिससे पता चलता है कि कंट्रोलर को किस हाथ में रखा जा रहा है या उसे किस हाथ में रखे जाने की संभावना ज़्यादा है इंच
• timestamp: इस गेमपैड का डेटा पिछली बार कब अपडेट किया गया था.
• mapping: इस डिवाइस के लिए, इस्तेमाल किया जा रहा बटन और ऐक्सिस की मैपिंग, "standard" या "xr-standard".
• pose: एक GamepadPose ऑब्जेक्ट यह वेबवीआर कंट्रोलर से जुड़े पोज़ की जानकारी का प्रतिनिधित्व करता है.
• axes: गेमपैड के सभी ऐक्सिस की वैल्यू का कलेक्शन, जो लीनियर तौर पर -1.0 से 1.0 तक.
• buttons: गेमपैड के सभी बटन के बारे में जानकारी देने वाला कलेक्शन.

ध्यान दें कि बटन डिजिटल (दबाए या दबाए नहीं गए) या ऐनालॉग (उदाहरण के लिए, 78% दबाए गए) हो सकते हैं. यह यही वजह है कि बटन को इन एट्रिब्यूट के साथ, GamepadButton ऑब्जेक्ट के तौर पर रिपोर्ट क्यों किया जाता है:

• pressed: बटन के दबाने की स्थिति (अगर बटन को दबाया जाता है, तो true और false बटन को दबाकर रखें.
• touched: बटन को छुए जाने की स्थिति. अगर बटन को टच का पता चल जाए, तो अगर बटन को टच किया जाता है, तो प्रॉपर्टी true होती है. अगर ऐसा नहीं होता है, तो false प्रॉपर्टी होती है.
• value: ऐनालॉग सेंसर वाले बटन के लिए, यह प्रॉपर्टी बताती है कि बटन पर क्लिक किया गया है. यह लीनियर तौर पर 0.0 से 1.0 की रेंज में नॉर्मलाइज़ किया हुआ है.
• hapticActuators: कलेक्शन में शामिल है GamepadHapticActuator ऑब्जेक्ट हैं, जिनमें से हर एक कंट्रोलर पर मौजूद हैप्टिक फ़ीडबैक हार्डवेयर दिखाता है.

आपके ब्राउज़र और आपके गेमपैड के आधार पर, आपको कुछ और चीज़ें भी दिख सकती हैं, एक vibrationActuator प्रॉपर्टी है. इससे दो तरह के रंबल इफ़ेक्ट दिखते हैं:

• Dual-Rumble: यह हैप्टिक फ़ीडबैक इफ़ेक्ट है, जो गेमपैड की हर ग्रिप में एक-एक रोटेटिंग मास एक्चुएटर से जनरेट होता है.
• ट्रिगर-रंबल: यह दो इंडिपेंडेंट मोटर से जनरेट हुआ हैप्टिक फ़ीडबैक इफ़ेक्ट होता है. साथ ही, गेमपैड के हर ट्रिगर में एक मोटर मौजूद होता है.

इस डायग्राम के तहत, नीचे दी गई जानकारी ली गई है सीधे निर्देश के हिसाब से, किसी सामान्य गेमपैड पर मैपिंग के साथ-साथ बटन और ऐक्सिस को सही क्रम में दिखाता है.

स्टैंडर्ड गेमपैड लेआउट को विज़ुअल तौर पर दिखाया गया है (सोर्स).

गेमपैड कनेक्ट होने पर सूचना पाएं

गेमपैड कब कनेक्ट होता है, यह जानने के लिए, ऐप्लिकेशन पर ट्रिगर होने वाला gamepadconnected इवेंट सुनें window ऑब्जेक्ट. जब उपयोगकर्ता किसी गेमपैड को कनेक्ट करता है, जो यूएसबी या ब्लूटूथ का इस्तेमाल करके हो सकता है, एक GamepadEvent ट्रिगर होता है, जिसमें गेमपैड की जानकारी सही तरीके से gamepad प्रॉपर्टी में मौजूद होती है. नीचे दिए गए उदाहरण में, Xbox 360 कंट्रोलर से एक उदाहरण देखा जा सकता है. मेरे पास इस कंट्रोलर का इस्तेमाल करने से जुड़ा उदाहरण शामिल है. रेट्रो गेमिंग).

window.addEventListener('gamepadconnected', (event) => {
  console.log('✅ 🎮 A gamepad was connected:', event.gamepad);
  /*
    gamepad: Gamepad
    axes: (4) [0, 0, 0, 0]
    buttons: (17) [GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton]
    connected: true
    id: "Xbox 360 Controller (STANDARD GAMEPAD Vendor: 045e Product: 028e)"
    index: 0
    mapping: "standard"
    timestamp: 6563054.284999998
    vibrationActuator: GamepadHapticActuator {type: "dual-rumble"}
  */
});

गेमपैड के डिसकनेक्ट होने पर सूचना पाएं

गेमपैड के डिसकनेक्ट होने की सूचना, कनेक्शन का पता लगाने के तरीके के हिसाब से दी जाती है. इस बार ऐप्लिकेशन gamepaddisconnected इवेंट को सुनता है. ध्यान दें कि नीचे दिए गए उदाहरण में इसका तरीका बताया गया है Xbox 360 कंट्रोलर को अनप्लग करने पर, connected अब false हो जाएगा.

window.addEventListener('gamepaddisconnected', (event) => {
  console.log('❌ 🎮 A gamepad was disconnected:', event.gamepad);
  /*
    gamepad: Gamepad
    axes: (4) [0, 0, 0, 0]
    buttons: (17) [GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton]
    connected: false
    id: "Xbox 360 Controller (STANDARD GAMEPAD Vendor: 045e Product: 028e)"
    index: 0
    mapping: "standard"
    timestamp: 6563054.284999998
    vibrationActuator: null
  */
});

आपके गेम लूप में मौजूद गेमपैड

गेमपैड को होल्ड करने के लिए, navigator.getGamepads() को कॉल किया जाता है. इससे, गेम का अरे दिखता है Gamepad आइटम के साथ. Chrome में अरे में हमेशा चार आइटम तय होते हैं. अगर शून्य या इससे कम है चार से ज़्यादा गेमपैड जुड़े हुए हैं, एक आइटम सिर्फ़ null हो सकता है. हमेशा और ध्यान रखें कि गेमपैड "याद रखें" और हो सकता है कि वे हमेशा पहला उपलब्ध स्लॉट.

// When no gamepads are connected:
navigator.getGamepads();
// (4) [null, null, null, null]

अगर एक या कई गेमपैड कनेक्ट हैं, लेकिन navigator.getGamepads() अब भी null आइटम की रिपोर्ट करता है, शायद आपको "जागना" पड़े हर गेमपैड पर उसका कोई भी बटन दबाकर. इसके बाद, गेमपैड से आपके गेम लूप में, नीचे दिए गए कोड में बताए गए हैं.

const pollGamepads = () => {
  // Always call `navigator.getGamepads()` inside of
  // the game loop, not outside.
  const gamepads = navigator.getGamepads();
  for (const gamepad of gamepads) {
    // Disregard empty slots.
    if (!gamepad) {
      continue;
    }
    // Process the gamepad state.
    console.log(gamepad);
  }
  // Call yourself upon the next animation frame.
  // (Typically this happens every 60 times per second.)
  window.requestAnimationFrame(pollGamepads);
};
// Kick off the initial game loop iteration.
pollGamepads();

गेम लूप के बाहर navigator.getGamepads() अरे का स्थायी रेफ़रंस सेव न करें. यह तरीका, लाइव ऑब्जेक्ट के बजाय स्टैटिक स्नैपशॉट दिखाता है. अपने गेम लूप में हर बार navigator.getGamepads() को कॉल करें.

वाइब्रेशन एक्चुएटर

vibrationActuator प्रॉपर्टी से एक GamepadHapticActuator ऑब्जेक्ट मिलता है, जो मोटर या अन्य एक्चुएटर का कॉन्फ़िगरेशन जो हैप्टिक के लिए बल लगा सकता है सुझाव/राय दें या शिकायत करें. Gamepad.vibrationActuator.playEffect() पर कॉल करके हैप्टिक इफ़ेक्ट चलाए जा सकते हैं. सिर्फ़ इफ़ेक्ट के मान्य टाइप 'dual-rumble' और 'trigger-rumble' हैं.

इस्तेमाल किए जा सकने वाले रंबल इफ़ेक्ट

if (gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
  // Trigger rumble supported.
} else if (gamepad.vibrationActuator.effects.includes('dual-rumble')) {
  // Dual rumble supported.
} else {
  // Rumble effects aren't supported.
}

डुअल रंबल

Dual-rumble, एक हैप्टिक कॉन्फ़िगरेशन के बारे में बताता है. इसमें स्टैंडर्ड गेमपैड के हर हैंडल में एक केमिकल और रोटेटिंग वाइब्रेशन मोटर. इस कॉन्फ़िगरेशन में, दोनों में से कोई भी मोटर पूरे गेमपैड को वाइब्रेट कर सकती है. दोनों द्रव्यमान असमान होते हैं, ताकि हर इफ़ेक्ट को जोड़कर ज़्यादा मुश्किल हैप्टिक इफ़ेक्ट तैयार किए जा सकते हैं. ड्यूअल-रंबल इफ़ेक्ट में चार पैरामीटर से तय होता है:

• duration: वाइब्रेशन इफ़ेक्ट की अवधि को मिलीसेकंड में सेट करता है.
• startDelay: वाइब्रेशन शुरू होने तक की देरी का समय सेट करता है.
• strongMagnitude और weakMagnitude: ज़्यादा और ज़्यादा तापमान के लिए, वाइब्रेशन की तीव्रता का लेवल सेट करें 0.0–1.0 की रेंज में नॉर्मलाइज़ की गई, लाइट के सनकी घूमती हुई मास मोटर.

// This assumes a `Gamepad` as the value of the `gamepad` variable.
const dualRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
  if (!('vibrationActuator' in gamepad)) {
    return;
  }
  gamepad.vibrationActuator.playEffect('dual-rumble', {
    // Start delay in ms.
    startDelay: delay,
    // Duration in ms.
    duration: duration,
    // The magnitude of the weak actuator (between 0 and 1).
    weakMagnitude: weak,
    // The magnitude of the strong actuator (between 0 and 1).
    strongMagnitude: strong,
  });
};

रंबल ट्रिगर करें

ट्रिगर रंबल, हैप्टिक फ़ीडबैक इफ़ेक्ट है. यह दो इंडिपेंडेंट मोटर से जनरेट होता है. इनमें हर गेमपैड के ट्रिगर में एक मोटर मौजूद होता है.

// This assumes a `Gamepad` as the value of the `gamepad` variable.
const triggerRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
  if (!('vibrationActuator' in gamepad)) {
    return;
  }
  // Feature detection.
  if (!('effects' in gamepad.vibrationActuator) || !gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
    return;
  }
  gamepad.vibrationActuator.playEffect('trigger-rumble', {
    // Duration in ms.
    duration: duration,
    // The left trigger (between 0 and 1).
    leftTrigger: leftTrigger,
    // The right trigger (between 0 and 1).
    rightTrigger: rightTrigger,
  });
};

अनुमतियों की नीति के साथ इंटिग्रेशन

Gamepad API की खास जानकारी, नीति से कंट्रोल करने वाली सुविधा, जिसे स्ट्रिंग "gamepad". इसका डिफ़ॉल्ट allowlist, "self" है. किसी दस्तावेज़ की अनुमतियों की नीति के आधार पर तय होता है क्या उस दस्तावेज़ में मौजूद किसी भी कॉन्टेंट को navigator.getGamepads() को ऐक्सेस करने की अनुमति है. अगर इसमें बंद हो किसी भी दस्तावेज़ के लिए न तो इस दस्तावेज़ में मौजूद किसी कॉन्टेंट को navigator.getGamepads() का इस्तेमाल करने की अनुमति होगी और न ही इसे gamepadconnected और gamepaddisconnected इवेंट ट्रिगर हुए.

<iframe src="index.html" allow="gamepad"></iframe>

डेमो

नीचे दिए गए उदाहरण में गेमपैड टेस्टर का डेमो एम्बेड किया गया है. सोर्स कोड glitch पर उपलब्ध है. इससे कनेक्ट करके डेमो आज़माएं गेमपैड को यूएसबी या ब्लूटूथ से शेयर किया गया हो और उसके बटन को दबाया जा रहा हो या उसके किसी ऐक्सिस को हिलाया जा रहा हो.

बोनस: web.dev पर Chrome Dino खेलें

आप इस पर अपने गेमपैड के साथ Chrome Dino खेल सकते हैं साइट पर मौजूद हैं. सोर्स कोड GitHub पर उपलब्ध है. इसमें गेमपैड पोलिंग लागू होने की जानकारी देखें trex-runner.js और ध्यान दें कि यह बटन दबाने पर उसे कैसे एम्युलेट कर रहा है.

Chrome Dino गेमपैड डेमो काम करने के लिए, मेरे पास यह है हमने Chrome Dino गेम को अपने मुख्य Chromium प्रोजेक्ट से हटा दिया (अपडेट किया गया शुरुआती कोशिश अर्नेल बैलेन ने, इसे एक अलग साइट पर डाला. साथ ही, डकिंग और वाइब्रेशन इफ़ेक्ट जोड़कर गेमपैड का मौजूदा एपीआई लागू करने पर, फ़ुल स्क्रीन मोड भी बनाया गया और मेहुल सतारडेकर ने भी गहरे रंग वाले मोड का इस्तेमाल किया लागू करना. गेमिंग का आनंद लें!

काम के लिंक

• Gamepad API की खास बातें
• Gamepad API एक्सटेंशन की खास बातें
• GitHub का डेटा स्टोर करने की जगह

स्वीकार की गई

इस दस्तावेज़ की समीक्षा फ़्रैंस्वा बोफ़र्ट ने की है और जो मेडली. Gamepad API की खास जानकारी में बदलाव यह करता है स्टीव एगोस्टन, जेम्स हॉलियर और मैट रेनॉल्ड्स. ये पुराने स्पेसिफ़िकेशन एडिटर हैं ब्रैंडन जोंस, स्कॉट ग्रैहम, और टेड मिएलज़ारेक. गेमपैड एक्सटेंशन की खास जानकारी में बदलाव यह करता है ब्रैंडन जोंस. लॉरा टोरेंट पुइग की हीरो इमेज.