Küçük bileşen yüzeyi
React bileşeninizin yalnızca iframe öğesini oluşturması, boyutunu ayarlaması ve isteğe bağlı olarak olay işleyicilerini yönetmesi yeterlidir.
React oyun bileşeni
Tarayıcı oyunları için React oyun bileşeni
React ekiplerinin oynanabilir bir widget eklemek için sıfırdan bir oyun geliştirmelerine gerek yoktur. Bir React bileşeni içinde Games I Know veya iframe öğesini oluşturun, çerçeve URL'sini iletin ve ana uygulama oyun durumuna ihtiyaç duyduğunda postMessage olaylarını dinleyin.
Iframe bileşeni
React mesaj dinleyicisi
Duyarlı sarmalayıcı
İmzalı tamamlama desteği
Kısa cevap
Bir çerçeve rotası kullanın, ardından sayfa bağlamı ekleyin.
React'te, /embed/{gameSlug}/frame/ için küçük bir iframe bileşeni oluşturun, tenantId'yi URL parametresi olarak geçirin ve Games I Know olayları için bir mesaj dinleyicisi ekleyin.
React uyumlu oyun widget'ını deneyin.
Bu demo, React uygulamanızın abone olabileceği iframe ve üst sayfa olaylarını göstermektedir.
React geliştiricileri embed adlı bir oyun ekliyor.
React ekipleri neden iframe widget'ını kullanıyor?
iframe, oyun çalışma ortamını uygulamanızdan ayrı tutarken, olay tabanlı entegrasyona da olanak tanır.
Oyun motoru paketi yok.
Oyun, React uygulamanızın paket boyutunu oyun tahtası mantığı, varlıklar veya gerçek zamanlı kodlarla artırmaz.
Net entegrasyon sınırı
Ana uygulama, oyunun iç işleyişine doğrudan bağlanmadan olaylara tepki verebilir.
Kurulum akışı
React'te bir oyun widget'ı nasıl embed edilir?
iframe öğesini bir bileşen içine sarın, gerekirse çerçeve URL'sini önbelleğe alın ve bileşen kaldırıldığında mesaj dinleyicilerini temizleyin.
Adım 1
Bir GameWidget bileşeni oluşturun.
Genişliği %100, yüksekliği sabit, "fullscreen" özelliğine izin veren ve Games I Know çerçeve URL'sini içeren bir iframe oluşturun.
Adım 2
Kiracı yapılandırmasını geçin
Veri panonuzdaki verilerin düzenli kalması için src bileşenini tenantId ve isteğe bağlı campaignId ile oluşturun.
Adım 3
useEffect'te dinleyin
window.addEventListener("message", handler) ifadesini ekleyin ve data.source değeri gamesiknow olan mesajları filtreleyin.
Adım 4
Ödüllerden önce doğrulayın.
Eğer React uygulaması ödüllerin kilidini açıyorsa, herhangi bir ödül vermeden önce arka uç sunucunuzu çağırın ve imzalı sonuçları doğrulayın.
Uygulama
React uygulama notları
iframe bileşenini sıkıcı tutun. Çoğu hata, kararsız boyutlandırmadan, yinelenen dinleyicilerden veya tarayıcı mesajlarına çok fazla güvenmekten kaynaklanır.
Sağlam bir anahtar kullanın.
iframe nesnesini her üst render işleminde yeniden bağlamayın. Oyun veya kiracı ayarları değişmedikçe src'yi sabit tutun.
Dinleyicileri temizleyin
`useEffect` fonksiyonundan bir temizleme fonksiyonu döndürün, böylece React geliştirme modu yinelenen olay işleyicileri bırakmaz.
Kullanıcı arayüzünü doğrulama işleminden ayırın.
React sonucu hızlı bir şekilde gösterebilir, ancak ödül veya kredi kararları sunucunuzda verilmelidir.
Mevcut oyunlar
Sayfaya uygun oyunu seçin.
Tic Tac Toe
Embed for same-screen play on your site, or send players to Games I Know to challenge a friend remotely with a room link.
Embed kurulumu
Four in a Row
Embed for local two-player drops on one screen, or link friends to play Four in a Row online from anywhere.
Embed kurulumu
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed kurulumu
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed kurulumu
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed kurulumu
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed kurulumu
SSS
React oyun bileşeni hakkında sık sorulan sorular
/embed/{gameSlug}/ ile /embed/{gameSlug}/frame/ arasındaki fark nedir?
iframe src'si olarak /embed/{gameSlug}/frame/ yolunu kullanın. Bu yol, web sitesi embed'ları ve postMessage olayları için oluşturulmuş hafif oyun çerçevesidir. /embed/{gameSlug}/ yolu ise, iframe içine yerleştirilecek yol değil, insanlar için genel önizleme ve SEO sayfasıdır.
Ziyaretçilerin bir uygulama indirmesi veya hesap oluşturması gerekiyor mu?
Hayır. Ziyaretçiler iframe uygulamasını telefon, tablet, dizüstü bilgisayar veya masaüstü bilgisayarlarında tarayıcı üzerinden oynayabilirler. İş ortağı hesabı yalnızca embed uygulamasını yükleyen web sitesi sahibi tarafından gereklidir.
embed'ı kendi alan adıma kısıtlayabilir miyim?
Evet. Games I Know ve embed'ler kayıtlı web siteleri ve alan adı kısıtlamalı kiracı ayarları etrafında tasarlanmıştır, bu nedenle kopyalanan iframe kodu yetkisiz sitelerde serbestçe yeniden kullanılamaz.
Şu anda hangi Games I Know başlıkları embed kullanılabilir durumda?
Tic Tac Toe, Four in a Row, Bingo ve I Know, embed destekli tarayıcı oyunları olarak mevcuttur. embed dokümantasyonu, desteklenen oyunlarda aynı olay modelini kullanır.
Games I Know bir React paketi mi?
Hayır. Games I Know ve embed'ler iframe tabanlıdır. Bu, kurulumun çerçeveden bağımsız kalmasını sağlarken, React bileşenleri içinde sorunsuz bir şekilde çalışmasını da mümkün kılar.
Tarayıcı oyunu eklemeye hazır mısınız?
Bir iş ortağı hesabı oluşturun, alan adınızı kaydedin ve web siteniz için alan adına özel bir iframe oluşturun.