Oyun kumandanızla Chrome dinozor oyununu oynayın

Web oyunlarınızı bir üst seviyeye taşımak için Gamepad API'sini nasıl kullanacağınızı öğrenin.

Thomas Steiner

Chrome'un çevrimdışı sayfasındaki paskalya yumurtası geçmişte en kötü saklanan sırlardan biridir ([citation needed], ancak çarpıcı etkiye sahip olduğu iddia edilir). Mobil cihazınızda boşluk tuşuna basarsanız dinozora dokunursanız çevrimdışı sayfa oynanabilir bir arcade oyunu haline gelir. Yeşil Ofis’in bir proje yöneticisinin oyun oynarken çevrimdışı olmanız gerekmez: Chrome'da, istediğiniz zaman about://dino adresine veya içinizdeki "geek" için about://network-error/-106 adresine gidin. Peki, Biliyor muydunuz? mevcut olduğunu Her ay 270 milyon Chrome dinozor oyunu oynanıyor mu?

Chrome dinozor oyununu içeren Chrome'un çevrimdışı sayfası.
Oynamak için boşluk tuşuna basın.

Bilinmesi daha faydalı olan ve sizin farkında olmayabileceğiniz bir diğer husus da, arcade modunda oyunu oyun kumandasıyla da oynayabilirsiniz. Oyun kumandası desteği yaklaşık bir yıl önce bir zaman diliminde, taahhüt: Recep Hakim Gördüğünüz gibi bu oyun da diğer Chromium projesi, açık kaynak. İçinde Oyun Kumandası API'sini nasıl kullanacağınızı göstermek istiyorum.

Oyun Kumandası API'sini kullanma

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

Gamepad API, hem Android'de hem de PC'de tarayıcı desteğine sahiptir ve mobil cihazlar. Oyun Kumandası API'sinin desteklenip desteklenmediğini aşağıdaki snippet'i kullanarak tespit edebilirsiniz:

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

Tarayıcı, oyun kumandasını nasıl gösterir?

Tarayıcı, oyun kumandalarını Gamepad olarak temsil eder nesneler'i tıklayın. Gamepad aşağıdaki özelliklere sahiptir:

  • id: Oyun kumandası için bir tanımlama dizesi. Bu dize, reklamverenin markasını veya bağlı bir oyun kumandası.
  • displayId: VRDisplay.displayId / ilişkili VRDisplay (geçerliyse).
  • index: Gezinmedeki oyun kumandasının dizini.
  • connected: Oyun kumandasının sisteme hâlâ bağlı olup olmadığını gösterir.
  • hand: Kumandanın hangi eli tuttuğunu veya tutma olasılığının en yüksek olduğu eli tanımlayan bir sıralama inç
  • timestamp: Bu oyun kumandası ile ilgili verilerin son güncellenme zamanı.
  • mapping: Bu cihaz için kullanılan düğme ve eksen eşlemesi, "standard" veya "xr-standard".
  • pose: GamepadPose nesnesi WebVR denetleyicisiyle ilişkili poz bilgilerini temsil eder.
  • axes: Oyun kumandasının tüm eksenleri için doğrusal olarak normalleştirilmiş değer dizisi -1.0-1.0.
  • buttons: Oyun kumandasının tüm düğmeleri için düğme durumları dizisi.

Düğmelerin dijital (basılmış veya basılmamış) ya da analog (örneğin, %78'ine basılmış) olabileceğini unutmayın. Bu düğmelerin aşağıdaki özelliklerle GamepadButton nesneleri olarak raporlanmasının nedeni budur:

  • pressed: Düğmenin basılı durumu (düğmeye basılıysa true ve false basılı tutmanız gerekir.
  • touched: Düğmenin dokunulan durumu. Düğme, dokunmayı algılayabiliyorsa özellik değeri true, düğmeye dokunuluyorsa false olur.
  • value: Analog sensöre sahip düğmeler için bu özellik, analog sensöre düğmesine basıldı ve 0.0–1.0 aralığında doğrusal olarak normalleştirilmiş.
  • hapticActuators: Şunları içeren bir dizi: GamepadHapticActuator Her biri kumandada kullanılabilen dokunsal geribildirim donanımını temsil eder.

Tarayıcınıza ve sahip olduğunuz oyun kumandasına bağlı olarak karşılaşabileceğiniz bir diğer şey de vibrationActuator özelliğidir. İki tür rumble efektine izin verir:

  • Dual-Rumble: Oyun kumandasının her bir tutma noktasında birer tane olacak şekilde, dönen iki alışılmadık kütle aktüatörünün oluşturduğu dokunsal geribildirim efekti.
  • Tetikleme-Rumble: Oyun kumandasının tetikleyicilerinin her birinde bir motor bulunan iki bağımsız motor tarafından oluşturulan dokunsal geribildirim etkisi.

Bu şemadan elde edilen şemaya genel bakış doğrudan özelliklere bakın, , genel bir oyun kumandasındaki düğmelerin ve eksenlerin haritasını ve yerleşimini gösteriyor.

Yaygın bir oyun kumandasının düğme ve eksen eşlemelerine ilişkin şemaya genel bakış.
Standart oyun kumandası düzeninin görsel temsili (Kaynak).

Oyun kumandası bağlandığında bildirim alma

Bir oyun kumandasının ne zaman bağlandığını öğrenmek için ekranda tetiklenen gamepadconnected etkinliğini dinleyin. window nesne algılandı. Kullanıcı, USB veya Bluetooth kullanarak bir oyun kumandası bağlandığında oyun kumandasının ayrıntılarını uygun şekilde adlandırılmış gamepad özelliğinde içeren bir GamepadEvent tetiklenir. Aşağıda, yakınlarda durduğum bir Xbox 360 kumandasını görebilirsiniz (evet, çok hoşuma gidiyorum). retro oyun).

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

Oyun kumandasının bağlantısı kesildiğinde bildirim alma

Oyun kumandası bağlantı kesintilerinden haberdar olmak, bağlantıların algılanmasına benzer şekilde gerçekleşir. Uygulama bu sefer gamepaddisconnected etkinliğini dinler. Aşağıdaki örnekte bu yöntemin nasıl olduğuna dikkat edin Xbox 360 kumandasını fişten çektiğimde connected artık false oluyor.

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 oyun kumandası

Bir oyun kumandasına erişebilmek, navigator.getGamepads() komutunun çağrılmasıyla başlar ve bu çağrı bir dizi döndürür. Gamepad öğeli. Chrome'daki dizi her zaman dört öğe uzunluğunda sabittir. Sıfır veya daha azsa bağlı olduğunu varsayalım. Bir öğe yalnızca null olabilir. Şu sayfadaki tüm maddeleri kontrol ettiğinizden emin olun: oyun kumandalarının "hatırladığını" her zaman toplantıda bulunmayabilir. ilk uygun zaman aralığı.

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

Bir veya daha fazla oyun kumandası bağlı olmasına rağmen navigator.getGamepads() yine de null öğe bildiriyorsa "uyanman" gerekebilir düğmelerinden birine basarak her oyun kumandasını kullanabilirsiniz. Ardından oyun kumandasını yoklayabilirsiniz. durumlarına aşağıdaki kodda gösterildiği gibi ekleyebilirsiniz.

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 etkinleştirici

vibrationActuator özelliği, GamepadHapticActuator dokunma teknolojisi için güç uygulayabilen motor veya diğer aktüatörlerin konfigürasyonu geri bildirim. Dokunsal efektler, Gamepad.vibrationActuator.playEffect() çağrılarak oynatılabilir. Tek geçerli efekt türleri şunlardır: 'dual-rumble' ve 'trigger-rumble'.

Desteklenen rumble efektleri

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.
}

İkili gürültü

Dual-rumble, standart bir oyun kumandasının her tutma yerinde alışılmadık dönen kütle titreşim motoru. Bu yapılandırmada, her iki motor da oyun kumandasını tüm titreştirebilir. İki kütle eşit değildir, bu nedenle her birinin efektleri birleştirip daha karmaşık dokunma efektleri oluşturmak için kullanılabilir. İkili rulo efektleri şu dört parametreyle tanımlanır:

  • duration: Titreşim etkisinin süresini milisaniye cinsinden ayarlar.
  • startDelay: Titreşim başlatılana kadar geçecek gecikme süresini ayarlar.
  • strongMagnitude ve weakMagnitude: Daha ağır ve düşük için titreşim yoğunluğu seviyelerini ayarlayın 0.0–1.0 aralığına göre normalleştirilmiş, daha hafif eksantrik dönen kütle motorları.
// 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,
  });
};

Sarsıntıyı tetikle

Tetikleme gürültüsü, oyun kumandasının tetikleyicilerinin her birinde bir motor bulunan iki bağımsız motor tarafından oluşturulan dokunsal geribildirim etkisidir.

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

İzin Politikası ile Entegrasyon

Oyun Kumandası API spesifikasyonu, politika tarafından kontrol edilen özelliği "gamepad" dizesi. Varsayılan allowlist, "self" değeridir. Bir dokümanın izin politikası, söz konusu dokümandaki herhangi bir içeriğin navigator.getGamepads() ürününe erişmesine izin verilip verilmediğini Şu kuruluş biriminde devre dışı bırakılmışsa: dokümandaki hiçbir içeriğin navigator.getGamepads() kullanmasına izin verilmeyecek veya gamepadconnected ve gamepaddisconnected etkinlikleri tetiklenir.

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

Demo

Aşağıdaki örnekte oyun kumandası test kullanıcısı demosu yerleştirilmiştir. Kaynak kodu Glitch'te kullanılabilir. Demoyu denemek için bir düğmelerinden birine basan veya herhangi bir eksenini hareket ettiren oyun kumandası.

Bonus: web.dev'de Chrome dino oynayın

Oyun kumandanızla Chrome Dinozor'u bu cihazda oynayabilirsiniz çok sitem var. Kaynak koduna GitHub'da ulaşabilirsiniz. Oyun kumandası yoklama uygulamasına göz atın: trex-runner.js tuşlara basma işleminin nasıl emüle olduğuna dikkat edin.

Chrome dinozor oyun kumandası demosunun çalışması için , Chrome dinozor oyununu temel Chromium projesinden çıkarttı ( daha önce Arnelle Ballane), videoyu bağımsız bir siteye yerleştirdi, örtme ve titreşim efektleri eklenerek mevcut oyun kumandası API uygulaması, tam ekran oluşturuldu ve Mehul Satardekar koyu mod katkısıyla hakkında bilgi edindiniz. İyi oyunlar dileriz!

Teşekkür

Bu belge, François Beaufort ve Joe Potpur. Gamepad API spesifikasyonu şu kullanıcı tarafından düzenlendi: Steve Agoston, James Hollyer ve Matt Reynolds. Eski spesifikasyon editörleri Brandon Jones, Scott Graham ve Ted Mielczarek Oyun Kumandası Uzantıları özelliği, Brandon Jones Laura Torrent Puig'in hero resmi.