surface des petits composants
Votre composant React n'a besoin que de rendre iframe, de le dimensionner et, éventuellement, de gérer les gestionnaires d'événements.
Widget de jeu React
Widget de jeu React pour jeux par navigateur
Les équipes React n'ont pas besoin de créer un jeu de A à Z pour ajouter un widget jouable. Il suffit d'afficher un élément `Games I Know` ou `iframe` dans un composant React, de transmettre l'URL de la fenêtre et d'écouter les événements `postMessage` lorsque l'application parente a besoin de l'état du jeu.
composant Iframe
Écouteur de messages React
Enveloppe réactive
Soutien à l'achèvement signé
Réponse courte
Utilisez une route de cadre, puis ajoutez le contexte de la page.
Dans React, créez un petit composant iframe pour /embed/{gameSlug}/frame/, transmettez tenantId comme paramètre d'URL et attachez un écouteur de messages pour les événements Games I Know.
Essayez le widget de jeu compatible React
La démo montre les événements iframe et les événements de la page parente auxquels votre application React peut s'abonner.
Développeurs React ajoutant un jeu embed
Pourquoi les équipes React utilisent-elles un widget iframe ?
Un iframe permet de séparer l'environnement d'exécution du jeu de votre application tout en autorisant une intégration basée sur les événements.
Aucun pack de moteur de jeu
Le jeu n'augmente pas la taille de votre application React avec de la logique de plateau, des ressources ou du code en temps réel.
Limite d'intégration claire
L'application parente peut réagir aux événements sans être directement couplée aux mécanismes internes du jeu.
Flux de configuration
Comment créer un widget de jeu dans React ?
Enveloppez le iframe dans un composant, mémorisez l'URL du cadre si nécessaire et nettoyez les écouteurs de messages lors du démontage.
Étape 1
Créer un composant GameWidget
Afficher un iframe avec une largeur de 100%, une hauteur stable, autoriser="plein écran" et l'URL du cadre Games I Know.
Étape 2
Configuration du locataire transmise
Créez la balise src avec votre tenantId et, éventuellement, votre campaignId afin que les données de votre tableau de bord restent organisées.
Étape 3
Écoutez l'effet d'utilisation
Attachez window.addEventListener("message", handler) et filtrez les messages où data.source est gamesiknow.
Étape 4
Vérifiez avant les récompenses
Si l'application React débloque des récompenses, appelez votre serveur et vérifiez les résultats signés avant d'accorder quoi que ce soit.
Mise en œuvre
Notes d'implémentation React
Veillez à ce que le composant iframe reste simple. La plupart des bogues proviennent d'un dimensionnement instable, d'écouteurs dupliqués ou d'une confiance excessive accordée aux messages du navigateur.
Utilisez une clé stable
Ne remontez pas le iframe à chaque rendu parent. Conservez la source stable sauf si les paramètres du jeu ou du locataire changent.
auditeurs de nettoyage
Retournez une fonction de nettoyage depuis useEffect afin que le mode de développement React ne laisse pas de gestionnaires d'événements en double.
Séparer l'interface utilisateur de la vérification
React peut afficher le résultat rapidement, mais les décisions relatives aux prix ou aux crédits doivent être prises sur votre 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 React
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 un package React ?
Non. Les Games I Know et embed sont basés sur iframe. Cela permet une configuration indépendante du framework tout en assurant un fonctionnement optimal au sein des composants React.
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.