İnce bileşen tabakası
Angular bileşeniniz yalnızca iframe öğesini oluşturur, boyutları ayarlar ve isteğe bağlı olay çıktılarını bağlar.
Angular oyun widget'ı
Tarayıcı oyunları için Angular oyun bileşeni
Angular uygulamaları, paket içine bir oyun motoru eklemeden oynanabilir bir tarayıcı oyunu oluşturabilir. Bir bileşende bir oyunu işleyin, çerçeve URL'sini güvenli bir şekilde bağlayın ve ana uygulama oyun sinyallerine ihtiyaç duyduğunda postMessage olaylarına abone olun.
Bileşen şablonu
Mesaj dinleyicisi
Duyarlı iframe
İmzalı tamamlama desteği
Kısa cevap
Bir çerçeve rotası kullanın, ardından sayfa bağlamı ekleyin.
Angular'da, /embed/{gameSlug}/frame/ adresine işaret eden bir iframe bileşeni oluşturun, sorgu dizesinde tenantId'yi geçirin ve data.source'un gamesiknow olduğu pencere mesajı olaylarını dinleyin.
Angular uyumlu oyun widget'ını deneyin.
Bu demo, Angular servisinizin veya bileşeninizin işleyebileceği iframe ve üst sayfa olaylarını göstermektedir.
Angular geliştiricileri embed adlı bir oyun ekliyor.
Angular ekipleri neden iframe widget'ını kullanıyor?
iframe, oyun çalışma zamanını Angular paketinizin dışında tutarken, servislerde veya bileşenlerde türlendirilmiş olay işleme olanağını da sağlar.
Uygulamada oyun mantığı yok.
Yönetim kurulu kuralları, varlıklar ve gerçek zamanlı davranışlar Games I Know çerçeve rotası içinde kalır.
Çerçeveye uygun sınır
Oyun içi bileşenlerle bağlantı kurmadan @HostListener veya özel bir mesaj servisi kullanın.
Kurulum akışı
Angular'da bir oyun widget'ı nasıl embed edilir?
Bağımsız veya özellikli bir bileşen oluşturun, sabit bir çerçeve URL'si bağlayın ve bileşen yok edildiğinde dinleyicileri temizleyin.
Adım 1
Bir GameWidgetComponent oluşturun
Genişliği %100, yüksekliği 640 piksele yakın sabit bir değerde, "fullscreen" özelliğine izin veren ve Games I Know çerçeve URL'sini içeren bir iframe ekleyin.
Adım 2
Çerçeve URL'sini oluşturun
Ortam veya çalışma zamanı yapılandırmasından alınan tenantId ve isteğe bağlı campaignId ile /embed/{gameSlug}/frame/ dosyasını oluşturun.
Adım 3
@HostListener veya bir servis aracılığıyla dinleyin.
Pencere mesajı olaylarını işleyin ve GAME_STARTED ve completion için data.source === "gamesiknow" koşulunu filtreleyin.
Adım 4
Ödüllerden önce doğrulayın.
Angular uygulaması içeriğin kilidini açıyorsa, imzalı token'ları arka uç sunucunuza iletin ve ödülleri vermeden önce bir iş ortağı sunucu anahtarıyla doğrulayın.
Uygulama
Angular uygulama notları
Değişiklik algılama döngüleri boyunca iframe kaynağını sabit tutun ve yok etme işleminde mesaj işleyicilerinden aboneliği iptal edin.
iframe cihazını yeniden monte etmekten kaçının.
Değişiklik algılama işlemlerinin her birinde iframe'ı yeniden oluşturmayın. Kiracı veya oyun değişmediği sürece src'yi yalnızca bir kez bağlayın.
ngOnDestroy temizleme işlemini kullanın.
Geliştirme modunda yinelenen işleyicilerin oluşmasını önlemek için bileşen yok edildiğinde mesaj dinleyicilerini kaldırın.
Kullanıcı arayüzünü doğrulama işleminden ayırın.
Angular kazanan arayüzünü hızlı bir şekilde gösterebilir, ancak ödüller ve puanlar sunucu tarafında belirlenmelidir.
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
Angular oyun widget'ı 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 Angular kütüphanesi mi yoksa npm paketi mi?
Hayır. Games I Know ve embed'ler iframe tabanlıdır, bu da Angular, React, Next.js, Astro ve diğer yığınlarda entegrasyonu hafif tutar.
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.