Berselancar di Internet dengan Gamepad (Javascript)

Duduk di meja, Anda menggunakan mouse dan keyboard sambil duduk di sofa - kemungkinan besar touchpad laptop atau layar sentuh tablet. Anda bahkan dapat menggunakan Leap Motion dan mengendalikan komputer Anda dengan gerakan. Seperti yang sudah Anda pahami, ada banyak cara untuk menjelajahi Internet dan mengelola komputer Anda. Gamepad mungkin salah satunya.

Pada artikel ini, saya akan membagikan kepada Anda caranya:

• sambungkan gamepad ke browser
• dengarkan acara gamepad
• kontrol fokus pada elemen halaman menggunakan gamepad
• buat umpan balik dalam bentuk getaran

Hubungkan gamepad Anda menggunakan USB atau Bluetooth dan mari kita mulai.

API Gamepad

Gamepad API telah ditambahkan ke standar HTML 5. API memungkinkan penggunaan gamepad di browser. Dalam kombinasi dengan elemen, API ini dapat digunakan untuk membuat game yang mendukung gamepad. Oleh karena itu, pengguna dapat bermain game menggunakan gamepad langsung di browser, yang sangat keren. Namun API dapat digunakan tidak hanya untuk game. Tidak ada yang menghentikan Anda membuat perangkat input dalam bentuk gamepad untuk tujuan yang sangat berbeda.

API Gamepad didukung dengan baik , tetapi masih dalam tahap konsep. Mungkin sesuatu akan berubah, dihapus atau ditambahkan di masa depan.

Kami menghubungkan gamepad

Saat gamepad terhubung ke komputer menggunakan USB atau Bluetooth, kita dapat menggunakan dua acara untuk menangani koneksi dan pemutusan:

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

Gamepad akan mulai berfungsi hanya setelah Anda menekan tombol (kira-kira Terjemahkan Translate atau Mulai). Faktanya adalah ini adalah keamanan / privasi browser. Oleh karena itu, perlu untuk memikirkan antarmuka yang menginformasikan pengguna tentang perlunya menekan tombol untuk mulai bekerja.

Acara gamepad adalah sebagai berikut di konsol:

Tata letak Gamepad: tombol dan sumbu

Seperti yang Anda lihat, log peristiwa memiliki banyak tombol (0 - 16) dan sumbu (sumbu 0 - 3). Tapi bagaimana Anda tahu bagaimana tombol bersembunyi di balik angka? Gamepad memiliki tata letak yang berbeda tergantung pada mereknya. Karena itu, Anda harus mencari informasi di Internet. Dalam hal ini, kami menghubungkan gamepad Xbox One dan memiliki tata letak ini:

Dengarkan keystroke

Saat mengembangkan antarmuka, Anda dapat menggunakan .addEventListener() untuk menambahkan acara pada keystroke. Dalam hal ini, ini tidak dapat dilakukan, karena tombol pada pengontrol tidak membuat acara. Dan seperti yang Anda lihat dari log di atas, Anda harus memeriksa bidang yang pressed secara manual:

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

Karena kami ingin melakukan verifikasi setiap saat, kami harus membungkusnya dalam satu lingkaran. Misalnya menggunakan requestAnimationFrame :

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

Navigasi antar item

Untuk menggunakan gamepad untuk menavigasi halaman web, Anda harus mensimulasikan keyboard. Tetapi pertama-tama Anda harus mendapatkan semua elemen pada halaman yang dapat difokuskan.
Menggunakan pemilih berikut, Anda bisa mendapatkan semua elemen ini:

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

Memindahkan fokus secara terprogram

Untuk fokus pada elemen, kita akan mengulang NodeList dan fokus pada elemen saat ini menggunakan metode element.focus() .

Contoh ini menunjukkan bagaimana Anda dapat melompat fokus dari elemen ke elemen:

 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() } 

Perhatikan penggunaan fungsi setTimeout . Ini digunakan untuk membatasi requestAnimationFrame hingga 100 milidetik. Tanpa ini, satu penekanan tombol dapat menghasilkan beberapa peristiwa gamepad, karena tidak ada onClick yang akrab bagi kami, dan secara fisik tidak mungkin untuk menekan dan melepaskan kunci dalam milidetik.

Klik pada elemen

Anda dapat click() elemen menggunakan metode click() :

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

Tambahkan umpan balik menggunakan getaran

Gamepad modern dapat bergetar. Getaran ini digunakan untuk umpan balik kepada pengguna, biasanya dalam game. Tetapi Anda juga dapat mencoba membuat umpan balik dari elemen web di halaman.

Gamepad sering dilengkapi dengan dua motor listrik, kuat dan lemah:

Kita dapat mengontrol motor-motor ini dari browser menggunakan vibrationActuator .
Untuk membuat getaran, kita dapat menggunakan metode 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 }); 

Saat menggunakan motor untuk getaran, ingatlah bahwa motor besar membutuhkan lebih banyak waktu untuk berakselerasi. Karena itu, untuk respons jangka pendek, lebih baik menggunakan motor kecil.

Kesimpulan

Dalam contoh ini, kami memeriksa fungsi dasar API Gamepad dan cara penggunaannya untuk bernavigasi di Internet.

Kode dan demo GitHub dapat dilihat di sini .

Tautan yang bermanfaat

html5gamepad.com - alat pemeriksa gamepad
API Gamepad di MDN