Strato sottile di componenti
Il tuo componente Angular si limita a renderizzare iframe, a impostarne le dimensioni e a collegare gli output di eventi opzionali.
Widget di gioco Angular
Widget di gioco Angular per giochi browser
Le applicazioni Angular possono embed un gioco per browser giocabile senza importare un motore di gioco nel bundle. Esegui il rendering di un Games I Know iframe in un componente, associa l'URL del frame in modo sicuro e iscriviti agli eventi postMessage quando l'app host ha bisogno di segnali di gioco.
Modello di componente
Ascoltatore di messaggi
Responsive iframe
Supporto per il completamento firmato
Risposta breve
Utilizza un percorso frame, quindi aggiungi il contesto della pagina.
In Angular, crea un componente con un iframe che punta a /embed/{gameSlug}/frame/, passa tenantId nella stringa di query e ascolta gli eventi dei messaggi della finestra dove data.source è gamesiknow.
Prova il widget di gioco compatibile con Angular
La demo mostra gli eventi iframe e della pagina padre che il tuo servizio o componente Angular può gestire.
Gli sviluppatori Angular aggiungono un gioco embed
Perché i team Angular usano un widget iframe
Un iframe mantiene l'ambiente di runtime del gioco al di fuori del bundle Angular, consentendo comunque la gestione di eventi tipizzati nei servizi o nei componenti.
Nessuna logica di gioco nell'app
Le regole del consiglio, le risorse e il comportamento in tempo reale rimangono all'interno del percorso del frame Games I Know.
confine sicuro della struttura
Utilizza @HostListener o un servizio di messaggistica dedicato senza vincoli con le meccaniche interne del gioco.
Flusso di configurazione
Come creare un widget di gioco in Angular
Crea un componente autonomo o un componente di funzionalità, associa un URL di frame stabile e rimuovi i listener quando il componente viene distrutto.
Passo 1
Crea un GameWidgetComponent
Aggiungi un iframe con larghezza 100%, un'altezza stabile di circa 640px, allow="fullscreen", e l'URL del frame Games I Know.
Passo 2
Costruisci l'URL del frame
Componi /embed/{gameSlug}/frame/ con tenantId e campaignId opzionale dall'ambiente o dalla configurazione di runtime.
Passo 3
Ascolta con @HostListener o un servizio
Gestisci gli eventi dei messaggi della finestra e filtra in base a data.source === "gamesiknow" per GAME_STARTED e completamento.
Passo 4
Verifica prima di ricevere i premi
Se l'app Angular sblocca contenuti, inoltra i token firmati al tuo backend e verificali con una chiave del server del partner prima di assegnare le ricompense.
Implementazione
Note sull'implementazione di Angular
Mantieni stabile il file sorgente iframe durante i cicli di rilevamento delle modifiche e annulla l'iscrizione ai gestori di messaggi al momento della distruzione.
Evitare di rimontare iframe
Non ricreare iframe ad ogni passaggio di rilevamento delle modifiche. Collega src una sola volta a meno che non cambino tenant o gioco.
Utilizzare la pulizia ngOnDestroy
Rimuovere i listener dei messaggi quando il componente viene distrutto per evitare gestori duplicati in modalità di sviluppo.
Separare l'interfaccia utente dalla verifica.
Angular può visualizzare rapidamente l'interfaccia utente per i vincitori, ma i crediti e i premi dovrebbero essere decisi lato server.
Giochi disponibili
Scegli il gioco più adatto alla pagina
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 configurazione
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 configurazione
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed configurazione
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed configurazione
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed configurazione
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed configurazione
FAQ
Domande frequenti su Widget di gioco Angular
Qual è la differenza tra /embed/{gameSlug}/ e /embed/{gameSlug}/frame/?
Utilizza /embed/{gameSlug}/frame/ come src di iframe. Questa route è il frame di gioco leggero creato per i embed del sito web e gli eventi postMessage. La route /embed/{gameSlug}/ è la pagina di anteprima pubblica e SEO per gli utenti, non la route da inserire all'interno di un iframe.
I visitatori devono scaricare un'app o creare un account?
No. I visitatori possono giocare all'interno del browser iframe su telefono, tablet, laptop o computer desktop. Un account partner è necessario solo al proprietario del sito web che installa embed.
Posso limitare embed al mio dominio?
Sì. I Games I Know e embed sono progettati per siti web registrati e impostazioni di tenant con restrizioni di dominio, quindi il codice iframe copiato non può essere riutilizzato liberamente su siti non autorizzati.
Quali titoli Games I Know sono attualmente embed disponibili?
Tic Tac Toe, Four in a Row, Bingo e I Know sono disponibili come giochi per browser embed. La documentazione embed utilizza lo stesso modello di eventi per tutti i giochi supportati.
Games I Know è una libreria Angular o un pacchetto npm?
No. Games I Know embed sono basati su iframe, il che mantiene l'integrazione leggera in Angular, React, Next.js, Astro e altri stack.
Pronti ad aggiungere un gioco al browser?
Crea un account partner, registra il tuo dominio e genera un iframe con restrizioni di dominio per il tuo sito web.