Capa delgada de componente
Tu componente Angular solo renderiza el iframe, establece las dimensiones y conecta las salidas de eventos opcionales.
Widget de juego Angular
Widget de juego Angular para juegos de navegador
Las aplicaciones Angular pueden embed un juego de navegador jugable sin importar un motor de juego en el paquete. Renderiza un Games I Know iframe en un componente, vincula la URL del marco de forma segura y suscríbete a los eventos postMessage cuando la aplicación host necesite señales de juego.
Plantilla de componente
oyente de mensajes
iframe adaptable
Soporte de finalización firmado
Respuesta corta
Utilice una ruta de marco y, a continuación, añada el contexto de la página.
En Angular, crea un componente con un iframe que apunte a /embed/{gameSlug}/frame/, pasa tenantId en la cadena de consulta y escucha los eventos de mensajes de ventana donde data.source sea gamesiknow.
Prueba el widget de juego compatible con Angular
La demostración muestra los eventos iframe y de página principal que puede manejar su servicio o componente de Angular.
Desarrolladores de Angular agregando un juego embed
¿Por qué los equipos de Angular utilizan un widget iframe?
Un iframe mantiene el tiempo de ejecución del juego fuera de su paquete Angular, al tiempo que permite el manejo de eventos tipados en servicios o componentes.
No hay lógica de juego en la aplicación.
Las reglas del tablero, los activos y el comportamiento en tiempo real permanecen dentro de la ruta del marco Games I Know.
Límite seguro para el marco
Utilice @HostListener o un servicio de mensajería dedicado sin acoplarse a los componentes internos del juego.
Flujo de configuración
Cómo agregar un widget de juego en Angular
Cree un componente independiente o de características, vincule una URL de marco estable y elimine los oyentes cuando se destruya el componente.
Paso 1
Crear un GameWidgetComponent
Agregue un iframe con un ancho del 100%, una altura estable cercana a 640px, permitir="fullscreen", y la URL del marco Games I Know.
Paso 2
Construye la URL del marco
Componga /embed/{gameSlug}/frame/ con tenantId y campaignId opcional de la configuración del entorno o del tiempo de ejecución.
Paso 3
Escucha con @HostListener o un servicio
Maneje los eventos de mensajes de ventana y filtre en data.source === "gamesiknow" para GAME_STARTED y finalización.
Paso 4
Verificar antes de recibir recompensas
Si la aplicación Angular desbloquea contenido, envíe los tokens firmados a su backend y verifíquelos con una clave de servidor asociada antes de otorgar las recompensas.
Implementación
Notas de implementación de Angular
Mantén estable el origen iframe durante los ciclos de detección de cambios y cancela la suscripción a los manejadores de mensajes al destruirlo.
Evite volver a montar el iframe.
No vuelva a crear iframe en cada pasada de detección de cambios. Vincule src una sola vez a menos que cambien el inquilino o el juego.
Utilice la limpieza de ngOnDestroy
Elimine los detectores de mensajes cuando se destruya el componente para evitar controladores duplicados en el modo de desarrollo.
Separar la interfaz de usuario de la verificación
Angular puede mostrar la interfaz de usuario del ganador rápidamente, pero los créditos y los premios deben decidirse en el servidor.
Juegos disponibles
Elige el juego que mejor se ajuste a la página.
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.
Configuración de 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.
Configuración de Embed
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Configuración de Embed
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Configuración de Embed
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Configuración de Embed
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Configuración de Embed
Preguntas frecuentes
Preguntas frecuentes sobre Widget de juego Angular
¿Cuál es la diferencia entre /embed/{gameSlug}/ y /embed/{gameSlug}/frame/?
Utilice /embed/{gameSlug}/frame/ como src de iframe. Esta ruta es el marco de juego ligero creado para los embed del sitio web y los eventos postMessage. La ruta /embed/{gameSlug}/ es la página de vista previa pública y SEO para los usuarios, no la ruta que se debe colocar dentro de un iframe.
¿Los visitantes necesitan descargar una aplicación o crear una cuenta?
No. Los visitantes pueden jugar dentro del navegador iframe en teléfono, tableta, computadora portátil o de escritorio. Solo el propietario del sitio web que instala embed necesita una cuenta de socio.
¿Puedo restringir el embed a mi propio dominio?
Sí. Los Games I Know y embed están diseñados en torno a sitios web registrados y configuraciones de inquilino con dominio restringido, por lo que el código iframe copiado no se puede reutilizar libremente en sitios no autorizados.
¿Qué títulos de Games I Know están actualmente disponibles en embed?
Tic Tac Toe, Four in a Row, Bingo y I Know están disponibles como juegos de navegador compatibles con embed. La documentación de embed utiliza el mismo modelo de eventos en todos los juegos compatibles.
¿Games I Know es una biblioteca de Angular o un paquete de npm?
No. Los Games I Know y embed se basan en iframe, lo que mantiene la integración ligera en Angular, React, Next.js, Astro y otras pilas.
¿Listo para agregar un juego de navegador?
Crea una cuenta de socio, registra tu dominio y genera un iframe restringido al dominio para tu sitio web.