Gamepad’inizle Chrome dino oyununu oynayın

Chrome’un çevrimdışı sayfası paskalya yumurtası, tarihin en kötü saklanan sırlarından biridir ([citation needed], ancak dramatik etki için yapılan iddia). tuşuna basarsanız uzay tuşuna basın veya mobil cihazlarda dinozora dokunun, çevrimdışı sayfa oynanabilir bir atari oyununa dönüşür. Oynamak istediğinizde aslında çevrimdışı olmanız gerekmediğinin farkında olabilirsiniz: Chrome’da şuraya gidebilirsiniz: about://dinoveya içinizdeki inek için şuraya göz atın: about://network-error/-106. Ama şu anda olduğunu biliyor muydunuz? Her ay 270 milyon Chrome dino oyunu oynanıyor?

Bilmenin daha faydalı olduğu ve muhtemelen farkında olmadığınız bir diğer gerçek ise, arcade modunda oyunu bir gamepad ile oynayabileceğinizdir. Gamepad desteği, bu yazının yazıldığı tarihte yaklaşık bir yıl önce eklendi. işlemek ile Reilly Grant. Gördüğünüz gibi oyun, tıpkı Chromium projesinin geri kalanı gibi tamamen açık kaynak. Bu yazıda size Gamepad API’yi nasıl kullanacağınızı göstermek istiyorum.

Gamepad API’sini Kullanma #

Özellik algılama ve tarayıcı desteği #

Gamepad API, evrensel olarak harika tarayıcı desteği hem masaüstünde hem de mobilde. Aşağıdaki pasajı kullanarak Gamepad API’nin desteklenip desteklenmediğini tespit edebilirsiniz:

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

Tarayıcı nasıl bir gamepad’i temsil eder? #

Tarayıcı, gamepad’leri şu şekilde temsil eder: Gamepad nesneler. A Gamepad aşağıdaki özelliklere sahiptir:

• id: Gamepad için bir tanımlama dizisi. Bu dizi, bağlı gamepad cihazının markasını veya stilini tanımlar.
• displayId: VRDisplay.displayId ilişkili bir VRDisplay (alakalı ise).
• index: Navigatördeki gamepad dizini.
• connected: Gamepad’in hala sisteme bağlı olup olmadığını gösterir.
• hand: Denetleyicinin hangi elle tutulduğunu veya büyük olasılıkla tutulacağını tanımlayan bir numaralandırma.
• timestamp: Bu gamepad için verilerin en son güncellendiği zaman.
• mapping: Bu cihaz için kullanımda olan düğme ve eksen eşlemesi, "standard" veya "xr-standard".
• pose: A GamepadPose WebVR denetleyicisi ile ilişkili poz bilgisini temsil eden nesne.
• axes: Gamepad’in tüm eksenleri için doğrusal olarak normalize edilmiş bir değerler dizisi. -1.0–1.0.
• buttons: Gamepad’in tüm düğmeleri için bir dizi düğme durumu.

Düğmelerin dijital (basılı veya basılmamış) veya analog (örneğin, %78 basılmış) olabileceğini unutmayın. Bu nedenle düğmeler şu şekilde rapor edilir: GamepadButton aşağıdaki niteliklere sahip nesneler:

• pressed: Düğmenin basılı hali (true düğme şu anda basılıysa ve false eğer basılmazsa.
• touched: Düğmenin dokunulma durumu. Düğme dokunmayı algılayabiliyorsa, bu özellik true düğmeye o anda dokunuluyorsa ve false aksi takdirde.
• value: Analog sensöre sahip düğmeler için bu özellik, düğmeye basılma miktarını temsil eder ve aralığına doğrusal olarak normalleştirilir. 0.0–1.0.
• hapticActuators: içeren bir dizi GamepadHapticActuator her biri denetleyicide bulunan dokunsal geri bildirim donanımını temsil eden nesneler.

Tarayıcınıza ve sahip olduğunuz gamepad’e bağlı olarak karşılaşabileceğiniz ek bir şey de, vibrationActuator mülk. Bu alan şu anda Chrome’da uygulanmaktadır ve şu amaçlar için ayrılmıştır: birleştirme içine Gamepad Uzantıları spesifikasyon

Aşağıdaki şematik genel bakış, alınan doğrudan spesifikasyondangenel bir gamepad üzerindeki düğmelerin ve eksenlerin eşlemesini ve düzenini gösterir.

Gamepad bağlandığında bildirim alma #

Gamepad’in ne zaman bağlandığını öğrenmek için şunu dinleyin: gamepadconnected tetikleyen olay window nesne. Kullanıcı, USB veya Bluetooth aracılığıyla olabilen bir oyun kumandasına bağlandığında, GamepadEvent gamepad’in ayrıntılarına uygun bir şekilde adlandırılmış bir şekilde sahip olan ateşlenir gamepad mülk. Aşağıda, ortalıkta dolaştığım bir Xbox 360 denetleyicisinden bir örnek görebilirsiniz (evet, retro oyunları severim).

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"}
*/
});

Gamepad bağlantısı kesildiğinde bildirim alma #

Oyun kumandası bağlantı kesintilerinin bildirilmesi, bağlantıların algılanma şekline benzer şekilde gerçekleşir. Bu sefer uygulama şunu dinler: gamepaddisconnected etkinlik. Aşağıdaki örnekte nasıl olduğuna dikkat edin connected şimdi false Xbox 360 denetleyicisini çıkardığımda.

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
*/
});

Oyun döngünüzdeki gamepad #

Bir gamepad’e sahip olmak, şu çağrıyla başlar: navigator.getGamepads()ile bir dizi döndürür Gamepad öğeler. Chrome’daki dizi Her zaman dört öğelik sabit bir uzunluğa sahiptir. Sıfır veya dörtten az gamepad bağlıysa, bir öğe sadece null. Her zaman dizinin tüm öğelerini kontrol ettiğinizden emin olun ve oyun kumandalarının yuvalarını “hatırladığını” ve her zaman ilk kullanılabilir yuvada bulunmayabileceğini unutmayın.

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

Bir veya birkaç gamepad bağlıysa, ancak navigator.getGamepads() hala raporlar null öğelerden herhangi birine basarak her gamepad’i “uyandırmanız” gerekebilir. Daha sonra aşağıda gösterildiği gibi oyun döngünüzdeki gamepad durumlarını sorgulayabilirsiniz.

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

Titreşim aktüatörünün kullanılması #

bu vibrationActuator özellik bir döndürür GamepadHapticActuator dokunsal geri bildirim amacıyla bir kuvvet uygulayabilen motorların veya diğer aktüatörlerin bir konfigürasyonuna karşılık gelen nesne. Dokunsal efektler arayarak oynanabilir Gamepad.vibrationActuator.playEffect(). Şu anda geçerli olan tek efekt türü 'dual-rumble'. Çift gürültü, standart bir gamepad’in her kolunda eksantrik dönen bir kütle titreşim motoruyla dokunsal bir yapılandırmayı tanımlar. Bu konfigürasyonda, her iki motor da tüm gamepad’i titretebilir. İki kütle eşit değildir, böylece daha karmaşık dokunsal etkiler yaratmak için her birinin etkisi birleştirilebilir. Çift gürültü efektleri dört parametre ile tanımlanır:

• duration: Titreşim efektinin süresini milisaniye cinsinden ayarlar.
• startDelay: Titreşim başlayana kadar olan gecikme süresini ayarlar.
• strongMagnitude Ve weakMagnitude: Aralığa göre normalleştirilmiş, daha ağır ve daha hafif eksantrik dönen kütleli motorlar için titreşim yoğunluğu seviyelerini ayarlayın 0.0–1.0.

// This assumes a `Gamepad` as the value of the `gamepad` variable.
const vibrate = (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 is 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,
});
};

İzin Politikası ile Entegrasyon #

Gamepad API spesifikasyonu, bir politika kontrollü özellik dize tarafından tanımlanan "gamepad". varsayılan allowlist dır-dir "self". Bir belgenin izin ilkesi, o belgedeki herhangi bir içeriğin erişmesine izin verilip verilmediğini belirler. navigator.getGamepads(). Herhangi bir belgede devre dışı bırakılırsa, belgedeki hiçbir içeriğin kullanılmasına izin verilmez. navigator.getGamepads()ne de gamepadconnected Ve gamepaddisconnected olaylar ateş.

iframe src="index.html" allow="gamepad">&LT/iframe>

Demo #

Basit gamepad test cihazı demosu aşağıda gömülüdür. Kaynak kodu mevcuttur Glitch’te. USB veya Bluetooth aracılığıyla bir gamepad bağlayarak ve düğmelerinden herhangi birine basarak veya herhangi bir eksenini hareket ettirerek demoyu deneyin.

Bonus: web.dev’de Chrome dino oynayın #

Oynayabilirsin krom dinozor bu sitedeki gamepad’inizle. Kaynak kodu mevcuttur GitHub’da. Şuradaki gamepad yoklama uygulamasına göz atın: trex-runner.js ve tuşlara basmayı nasıl taklit ettiğini not edin.

İçin Chrome dinozor oyun kumandası çalışmak için, Chrome dino oyununu temel Chromium projesinden söktüm (bir önceki çaba ile Arnelle Ballane), bağımsız bir siteye yerleştirdi, mevcut gamepad API uygulamasını eğilme ve titreşim efektleri ekleyerek genişletti, tam ekran modu oluşturdu ve Mehul Satardekar karanlık mod uygulamasına katkıda bulundu. Mutlu oyunlar!

Kullanışlı bağlantılar #

teşekkürler #

Bu makale tarafından incelendi François Beaufort Ve Joe Karışık. Gamepad API spesifikasyonu şu anda tarafından düzenlenmektedir. Steve Agoston, James HollyerVe Matt Reynolds. Eski özellik editörleri Brandon Jones, Scott GrahamVe Ted Mielczarek. Oyun Kumandası Uzantıları özelliği tarafından düzenlenir Brandon Jones. Laura Torrent Puig’in kahraman görseli.