تصفح الإنترنت باستخدام Gamepad (Javascript)

عند الجلوس على الطاولة ، يمكنك استخدام الماوس ولوحة المفاتيح أثناء الجلوس على الأريكة - على الأرجح لوحة اللمس للكمبيوتر المحمول أو الشاشة التي تعمل باللمس للكمبيوتر اللوحي. يمكنك استخدام Leap Motion والتحكم في جهاز الكمبيوتر الخاص بك باستخدام الإيماءات. كما فهمت بالفعل ، هناك العديد من الطرق لتصفح الإنترنت وإدارة جهاز الكمبيوتر الخاص بك. لوحة اللعبة قد تكون واحدة منهم.

في هذه المقالة ، سوف أشارككم كيف:

• قم بتوصيل لوحة اللعبة بالمتصفح
• الاستماع إلى أحداث gamepad
• السيطرة على التركيز على عناصر الصفحة باستخدام gamepad
• تقديم ملاحظات في شكل اهتزاز

قم بتوصيل لوحة اللعبة باستخدام USB أو Bluetooth ودعنا نبدأ.

واجهة برمجة تطبيقات Gamepad

تمت إضافة لوحة تحكم واجهة برمجة التطبيقات (API) إلى معيار HTML 5. يسمح واجهة برمجة التطبيقات (API) باستخدام لوحات الألعاب في المستعرض. بالاقتران مع عنصر ، يمكن استخدام واجهة برمجة التطبيقات هذه لإنشاء ألعاب تدعم لوحة ألعاب. لذلك ، يمكن للمستخدمين لعب الألعاب باستخدام لوحة الألعاب مباشرة في المتصفح ، وهو أمر رائع للغاية. ولكن يمكن استخدام API ليس فقط للألعاب. لا أحد يمنعك من إنشاء جهاز إدخال في شكل لوحة ألعاب لأغراض مختلفة تمامًا.

واجهة برمجة تطبيقات Gamepad مدعومة جيدًا ، لكنها لا تزال في مرحلة المسودة. ربما يتغير شيء ما أو يتم حذفه أو إضافته في المستقبل.

نحن ربط لوحة gamepad

عندما تتصل لوحة اللعبة بالكمبيوتر باستخدام USB أو Bluetooth ، يمكننا استخدام حدثين من أجل التعامل مع الاتصالات وقطع الاتصال:

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

لن تبدأ لوحة اللعبة في العمل إلا بعد الضغط على الزر (تقريبًا. ترجمة أي أو بدء). الحقيقة هي أن هذا هو أمن / خصوصية المتصفح. لذلك ، من الضروري التفكير في الواجهة لإعلام المستخدم بالحاجة إلى الضغط على زر لبدء العمل.

أحداث gamepad كالتالي في وحدة التحكم:

تخطيط Gamepad: الأزرار والفؤوس

كما ترون ، يحتوي سجل الأحداث على مجموعة من الأزرار (0 - 16) وفؤوس (محاور 0 - 3). ولكن كيف يمكنك معرفة كيفية إخفاء الأزرار وراء الرقم؟ تتميز Gamepads بتصميمات مختلفة حسب العلامة التجارية. لذلك ، يجب عليك البحث عن المعلومات على الإنترنت. في هذه الحالة ، نقوم بتوصيل لوحة ألعاب 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 إلى NodeList ونركز على العنصر الحالي باستخدام أسلوب 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 مللي ثانية. بدون ذلك ، يمكن أن تؤدي نقرة واحدة على المفتاح إلى إنشاء العديد من أحداث لوحة الألعاب ، حيث لا يوجد onClick مألوف لدينا ، ومن المستحيل فعليًا الضغط على مفتاح وإصداره في غضون ميلي ثانية واحدة.

انقر على العناصر

يمكنك click() العناصر باستخدام طريقة click() :

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

إضافة ملاحظات باستخدام الاهتزاز

منصات الألعاب الحديثة يمكن أن تهتز. يتم استخدام هذه الاهتزازات للتغذية الراجعة للمستخدم ، وعادة في الألعاب. لكن يمكنك أيضًا محاولة تقديم تعليقات من عناصر الويب على الصفحة.

غالبًا ما تكون لوحات الألعاب مزودة بمحركين كهربائيين ، ضعيفين وضعفاء:

يمكننا التحكم في هذه المحركات من متصفح باستخدام vibrationActuator .
لإنشاء الاهتزاز ، يمكننا استخدام طريقة 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 }); 

عند استخدام المحركات للاهتزاز ، تذكر أن المحرك الكبير يحتاج إلى مزيد من الوقت للتعجيل. لذلك ، بالنسبة للاستجابات قصيرة الأجل ، من الأفضل استخدام محرك صغير.

استنتاج

في هذا المثال ، قمنا بفحص الوظائف الأساسية لواجهة برمجة تطبيقات Gamepad وكيف يمكن استخدامها للتنقل عبر الإنترنت.

ويمكن رؤية رمز جيثب والعرض هنا .

روابط مفيدة

html5gamepad.com - أداة مدقق gamepad
Gamepad API على MDN