couche de composants minces
Votre composant Angular ne fait que rendre le iframe, définir les dimensions et connecter les sorties d'événements optionnelles.
Widget de jeu Angular
Widget de jeu Angular pour jeux par navigateur
Les applications Angular peuvent exécuter un jeu de navigateur jouable sans importer de moteur de jeu dans le bundle. Affichez une fenêtre dans un composant, liez l'URL de la fenêtre en toute sécurité et abonnez-vous aux événements postMessage lorsque l'application hôte a besoin de signaux de jeu.
Modèle de composant
écouteur de messages
Réactif iframe
Soutien à l'achèvement signé
Réponse courte
Utilisez une route de cadre, puis ajoutez le contexte de la page.
Dans Angular, créez un composant avec un iframe pointant vers /embed/{gameSlug}/frame/, transmettez tenantId dans la chaîne de requête et écoutez les événements de message de fenêtre où data.source est gamesiknow.
Essayez le widget de jeu compatible avec Angular
La démo montre les événements iframe et de page parente que votre service ou composant Angular peut gérer.
Développeurs Angular ajoutant un jeu embed
Pourquoi les équipes Angular utilisent un widget iframe
Un iframe permet de maintenir l'exécution du jeu en dehors de votre bundle Angular tout en autorisant la gestion d'événements typés dans les services ou les composants.
Aucune logique de jeu dans l'application
Les règles du conseil d'administration, les ressources et le comportement en temps réel restent à l'intérieur de la route de trame Games I Know.
Limite de sécurité du cadre
Utilisez @HostListener ou un service de messagerie dédié sans couplage avec les mécanismes internes du jeu.
Flux de configuration
Comment créer un widget de jeu dans Angular ?
Créez un composant autonome ou un composant de fonctionnalité, liez une URL de cadre stable et nettoyez les écouteurs lorsque le composant est détruit.
Étape 1
Créer un composant GameWidget
Ajoutez un iframe avec une largeur de 100%, une hauteur stable proche de 640px, allow="fullscreen", et l'URL du cadre Games I Know.
Étape 2
Construisez l'URL du cadre
Composez /embed/{gameSlug}/frame/ avec tenantId et campaignId optionnel provenant de la configuration d'environnement ou d'exécution.
Étape 3
Écoutez avec @HostListener ou un service
Gérer les événements de messages de fenêtre et filtrer sur data.source === "gamesiknow" pour GAME_STARTED et la complétion.
Étape 4
Vérifiez avant les récompenses
Si l'application Angular débloque du contenu, transmettez les jetons signés à votre serveur et vérifiez-les avec une clé de serveur partenaire avant d'octroyer les récompenses.
Mise en œuvre
Notes d'implémentation d'Angular
Maintenez la source iframe stable au fil des cycles de détection des changements et désabonnez-vous des gestionnaires de messages lors de la destruction.
Évitez de remonter le iframe
Ne recréez pas iframe à chaque détection de modifications. Liez src une seule fois, sauf en cas de changement de locataire ou de jeu.
Utilisez le nettoyage ngOnDestroy
Supprimez les écouteurs de messages lorsque le composant est détruit afin d'éviter les gestionnaires dupliqués en mode développement.
Séparer l'interface utilisateur de la vérification
Angular peut afficher rapidement l'interface utilisateur du gagnant, mais les crédits et les prix doivent être décidés côté serveur.
Jeux disponibles
Choisissez le jeu qui convient à la page
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 configuration
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 configuration
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed configuration
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed configuration
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed configuration
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed configuration
FAQ
Questions fréquentes concernant Widget de jeu Angular
Quelle est la différence entre /embed/{gameSlug}/ et /embed/{gameSlug}/frame/?
Utilisez /embed/{gameSlug}/frame/ comme source de iframe. Cette route correspond au cadre de jeu léger conçu pour les événements embed du site web et les événements postMessage. La route /embed/{gameSlug}/ est la page de prévisualisation publique et la page optimisée pour le référencement (SEO) ; elle ne doit pas être placée dans un iframe.
Les visiteurs doivent-ils télécharger une application ou créer un compte ?
Non. Les visiteurs peuvent jouer directement dans le navigateur iframe sur téléphone, tablette, ordinateur portable ou ordinateur de bureau. Un compte partenaire est uniquement nécessaire au propriétaire du site web qui installe embed.
Puis-je limiter embed à mon propre domaine ?
Oui. Les Games I Know et embed sont conçus autour de sites Web enregistrés et de paramètres de locataires restreints au domaine, donc le code iframe copié ne peut pas être librement réutilisé sur des sites non autorisés.
Quels titres Games I Know sont actuellement embeddable ?
Les jeux Tic Tac Toe, Four in a Row, Bingo et I Know sont disponibles en tant que jeux navigateur jouables (embed). La documentation embed utilise le même modèle d'événements pour tous les jeux compatibles.
Games I Know est-il une bibliothèque Angular ou un package npm ?
Non. Les Games I Know et embed sont basés sur iframe, ce qui permet une intégration légère dans Angular, React, Next.js, Astro et d'autres piles.
Prêt à ajouter un jeu par navigateur ?
Créez un compte partenaire, enregistrez votre domaine et générez un iframe à restriction de domaine pour votre site web.