Lapisan komponen tipis
Komponen Angular Anda hanya merender iframe, mengatur dimensi, dan menghubungkan output event opsional.
Widget game Angular
Widget game Angular untuk game berbasis browser.
Aplikasi Angular dapat embed memainkan game browser tanpa mengimpor mesin game ke dalam bundel. Render Games I Know iframe dalam sebuah komponen, ikat URL frame dengan aman, dan berlangganan event postMessage ketika aplikasi host membutuhkan sinyal permainan.
Templat komponen
Pendengar pesan
Responsif iframe
Dukungan penyelesaian yang ditandatangani
Jawaban singkat
Gunakan rute frame, lalu tambahkan konteks halaman.
Di Angular, buat komponen dengan iframe yang mengarah ke /embed/{gameSlug}/frame/, berikan tenantId dalam query string, dan dengarkan event pesan jendela di mana data.source adalah gamesiknow.
Cobalah widget game yang kompatibel dengan Angular.
Demo ini menunjukkan event iframe dan parent-page yang dapat ditangani oleh layanan atau komponen Angular Anda.
Pengembang Angular menambahkan game embed
Mengapa tim Angular menggunakan widget iframe
Sebuah iframe menjaga runtime game tetap berada di luar bundel Angular Anda sambil tetap memungkinkan penanganan event bertipe di dalam layanan atau komponen.
Tidak ada logika permainan di dalam aplikasi.
Aturan papan, aset, dan perilaku waktu nyata tetap berada di dalam rute frame Games I Know.
Batas aman kerangka kerja
Gunakan @HostListener atau layanan pesan khusus tanpa ketergantungan pada internal game.
Alur pengaturan
Cara embed widget game di Angular
Buat komponen mandiri atau komponen fitur, ikat URL frame yang stabil, dan bersihkan listener saat komponen dihancurkan.
Langkah 1
Buat GameWidgetComponent
Tambahkan iframe dengan lebar 100%, tinggi stabil sekitar 640px, allow="fullscreen", dan URL frame Games I Know.
Langkah 2
Buat URL bingkai
Susun /embed/{gameSlug}/frame/ dengan tenantId dan campaignId opsional dari konfigurasi lingkungan atau runtime.
Langkah 3
Dengarkan dengan @HostListener atau layanan lainnya.
Tangani peristiwa pesan jendela dan filter berdasarkan data.source === "gamesiknow" untuk GAME_STARTED dan penyelesaian.
Langkah 4
Verifikasi sebelum memberikan hadiah
Jika aplikasi Angular membuka konten, teruskan token yang telah ditandatangani ke backend Anda dan verifikasi dengan kunci server mitra sebelum memberikan hadiah.
Pelaksanaan
Catatan implementasi Angular
Jaga agar sumber iframe tetap stabil di seluruh siklus deteksi perubahan dan berhenti berlangganan dari penangan pesan saat penghancuran.
Hindari memasang ulang iframe
Jangan membuat ulang iframe pada setiap proses deteksi perubahan. Ikat src sekali saja kecuali jika terjadi perubahan pada tenant atau game.
Gunakan pembersihan ngOnDestroy
Hapus listener pesan saat komponen dihancurkan untuk mencegah handler duplikat dalam mode pengembangan.
Pisahkan antarmuka pengguna (UI) dari verifikasi.
Angular dapat menampilkan UI pemenang dengan cepat, tetapi kredit dan hadiah harus ditentukan di sisi server.
Permainan yang tersedia
Pilih permainan yang sesuai dengan halaman.
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.
Pengaturan Embed
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.
Pengaturan Embed
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Pengaturan Embed
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Pengaturan Embed
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Pengaturan Embed
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Pengaturan Embed
Pertanyaan yang Sering Diajukan (FAQ)
Pertanyaan umum tentang Widget game Angular
Apa perbedaan antara /embed/{gameSlug}/ dan /embed/{gameSlug}/frame/?
Gunakan /embed/{gameSlug}/frame/ sebagai src iframe. Rute tersebut adalah kerangka game ringan yang dibangun untuk embed situs web dan peristiwa postMessage. Rute /embed/{gameSlug}/ adalah halaman pratinjau publik dan SEO untuk orang-orang, bukan rute yang ditempatkan di dalam iframe.
Apakah pengunjung perlu mengunduh aplikasi atau membuat akun?
Tidak. Pengunjung dapat bermain di dalam browser iframe di ponsel, tablet, laptop, atau desktop. Akun mitra hanya diperlukan oleh pemilik situs web yang memasang embed.
Bisakah saya membatasi embed hanya untuk domain saya sendiri?
Ya. Games I Know embed dirancang berdasarkan situs web terdaftar dan pengaturan penyewa yang dibatasi domain, sehingga kode iframe yang disalin tidak dapat digunakan kembali secara bebas di situs yang tidak berizin.
Judul Games I Know mana yang saat ini embed dapat digunakan?
Tic Tac Toe, Four in a Row, Bingo, dan I Know tersedia sebagai game browser yang dapat dimainkan di embed. Dokumentasi embed menggunakan model event yang sama di seluruh game yang didukung.
Apakah Games I Know merupakan library Angular atau paket npm?
Tidak. Games I Know embeds berbasis iframe, yang menjaga integrasi tetap ringan di Angular, React, Next.js, Astro, dan tumpukan lainnya.
Siap menambahkan game browser?
Buat akun mitra, daftarkan domain Anda, dan hasilkan iframe yang dibatasi domain untuk situs web Anda.