Dünne Komponentenschicht
Ihre Angular-Komponente rendert lediglich das iframe, legt die Dimensionen fest und verbindet optionale Ereignisausgänge.
Angular-Spiel-Widget
Angular-Spiel-Widget für Browserspiele
Angular-Anwendungen können ein spielbares Browserspiel bereitstellen, ohne eine Game-Engine in das Bundle zu importieren. Rendern Sie ein Spiel in einer Komponente, binden Sie die Frame-URL sicher und abonnieren Sie postMessage-Ereignisse, wenn die Host-Anwendung Gameplay-Signale benötigt.
Komponentenvorlage
Nachrichtenempfänger
Responsive iframe
Unterzeichnete Abschlussbestätigung
Kurzantwort
Verwenden Sie eine Frame-Route und fügen Sie anschließend den Seitenkontext hinzu.
In Angular erstellen Sie eine Komponente mit einem iframe, das auf /embed/{gameSlug}/frame/ zeigt, übergeben tenantId in der Abfragezeichenfolge und lauschen auf window-Nachrichtenereignisse, bei denen data.source gamesiknow ist.
Probieren Sie das Angular-kompatible Spiel-Widget aus.
Die Demo zeigt die iframe- und übergeordneten Seitenereignisse, die Ihr Angular-Service oder Ihre Komponente verarbeiten kann.
Angular-Entwickler fügen ein Spiel hinzu embed
Warum Angular-Teams ein iframe-Widget verwenden
Ein iframe hält die Spiellaufzeit außerhalb Ihres Angular-Bundles und ermöglicht dennoch die typisierte Ereignisbehandlung in Diensten oder Komponenten.
Die App enthält keine Spiellogik.
Boardregeln, Assets und Echtzeitverhalten bleiben innerhalb der Games I Know Frame-Route.
Framework-sichere Grenze
Verwenden Sie @HostListener oder einen dedizierten Nachrichtendienst, ohne an die internen Abläufe des Spiels anzuknüpfen.
Ablauf einrichten
Wie man ein Spiel-Widget in Angular mit embed ausführt
Erstellen Sie eine eigenständige Komponente oder eine Feature-Komponente, binden Sie eine stabile Frame-URL und bereinigen Sie die Listener, wenn die Komponente zerstört wird.
Schritt 1
Erstellen Sie eine GameWidgetComponent
Fügen Sie ein iframe mit einer Breite von 100 %, einer stabilen Höhe von ca. 640px, allow="fullscreen", und der Games I Know Frame-URL hinzu.
Schritt 2
Erstellen Sie die Frame-URL
Kompilieren Sie /embed/{gameSlug}/frame/ mit tenantId und optional campaignId aus der Umgebungs- oder Laufzeitkonfiguration.
Schritt 3
Hören Sie mit @HostListener oder einem Dienst zu.
Behandelt Fenstermeldungsereignisse und filtert nach data.source === "gamesiknow" für GAME_STARTED und Abschluss.
Schritt 4
Vor der Prämienvergabe überprüfen.
Wenn die Angular-App Inhalte freischaltet, leiten Sie signierte Token an Ihr Backend weiter und verifizieren Sie diese mit einem Partnerserverschlüssel, bevor Sie Belohnungen gewähren.
Durchführung
Angular-Implementierungshinweise
Halten Sie die iframe-Quelle über Änderungsüberwachungszyklen hinweg stabil und melden Sie sich beim Zerstören von Nachrichtenbehandlern ab.
Vermeiden Sie das erneute Mounten von iframe
iframe sollte nicht bei jedem Änderungsdurchlauf neu erstellt werden. src sollte nur einmal gebunden werden, es sei denn, es ändert sich der Mandant oder das Spiel.
Verwenden Sie ngOnDestroy für die Bereinigung.
Um doppelte Handler im Entwicklermodus zu vermeiden, werden die Message-Listener entfernt, wenn die Komponente zerstört wird.
Benutzeroberfläche und Verifizierung trennen
Angular kann die Gewinner-UI schnell anzeigen, aber Credits und Preise sollten serverseitig festgelegt werden.
Verfügbare Spiele
Wähle das Spiel aus, das zur Seite passt.
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 Setup
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 Setup
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed Setup
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed Setup
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed Setup
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed Setup
Häufig gestellte Fragen
Häufig gestellte Fragen zu Angular-Spiel-Widget
Was ist der Unterschied zwischen /embed/{gameSlug}/ und /embed/{gameSlug}/frame/?
Verwenden Sie /embed/{gameSlug}/frame/ als iframe-Quelle. Diese Route ist der schlanke Spiel-Frame, der für Website-embed- und postMessage-Ereignisse erstellt wurde. Die Route /embed/{gameSlug}/ ist die öffentliche Vorschau- und SEO-Seite für Benutzer und nicht die Route, die in einem iframe platziert werden soll.
Müssen Besucher eine App herunterladen oder ein Konto erstellen?
Nein. Besucher können direkt im Browser auf ihrem Smartphone, Tablet, Laptop oder Desktop-Computer spielen. Ein Partnerkonto wird nur vom Website-Betreiber benötigt, der die Anwendung installiert.
Kann ich embed auf meine eigene Domäne beschränken?
Ja. Games I Know und embed sind für registrierte Websites und domainbeschränkte Mandanteneinstellungen konzipiert, daher kann kopierter iframe-Code nicht frei auf nicht autorisierten Websites wiederverwendet werden.
Welche Games I Know Titel sind derzeit embeddbar?
Tic Tac Toe, Four in a Row, Bingo und I Know sind als embed-fähige Browserspiele verfügbar. Die embed-Dokumentation verwendet für alle unterstützten Spiele dasselbe Ereignismodell.
Ist Games I Know eine Angular-Bibliothek oder ein npm-Paket?
Nein. Games I Know und embed basieren auf iframe, wodurch die Integration in Angular, React, Next.js, Astro und anderen Stacks schlank bleibt.
Bereit, ein Browserspiel hinzuzufügen?
Erstellen Sie ein Partnerkonto, registrieren Sie Ihre Domain und generieren Sie eine domainbeschränkte iframe für Ihre Website.