Тонкий компонентный слой
Ваш компонент Angular отображает только iframe, задает размеры и подключает необязательные выходные данные событий.
Игровой виджет Angular
Angular-виджет для браузерных игр
Приложения Angular могут создавать играбельные браузерные игры без импорта игрового движка в пакет. Можно отобразить Games I Know iframe в компоненте, безопасно привязать URL фрейма и подписаться на события postMessage, когда хост-приложению потребуются сигналы игрового процесса.
Шаблон компонента
слушатель сообщений
Адаптивный iframe
Подписанная поддержка завершения
Краткий ответ
Используйте маршрут через фрейм, а затем добавьте контекст страницы.
В Angular создайте компонент с iframe, указывающим на /embed/{gameSlug}/frame/, передайте tenantId в строке запроса и отслеживайте события оконных сообщений, где data.source - gamesiknow.
Попробуйте игровой виджет, совместимый с Angular.
Демонстрация показывает события iframe и parent-page, которые может обрабатывать ваш сервис или компонент Angular.
Разработчики Angular добавляют игру embed
Почему команды Angular используют виджет iframe
iframe позволяет вывести среду выполнения игры за пределы вашего Angular-бандаля, при этом сохраняя возможность типизированной обработки событий в сервисах или компонентах.
В приложении отсутствует игровая логика.
Правила доски, ресурсы и поведение в реальном времени остаются внутри маршрута кадра Games I Know.
Граница, обеспечивающая безопасность конструкции
Используйте @HostListener или выделенный сервис обмена сообщениями, не привязываясь к внутренним механизмам игры.
Настройка процесса
Как создать игровой виджет в Angular
Создайте автономный или функциональный компонент, привяжите стабильный URL-адрес фрейма и выполните очистку обработчиков событий при уничтожении компонента.
Шаг 1
Создайте компонент GameWidgetComponent
Добавьте iframe с шириной 100%, стабильной высотой около 640 пикселей, параметром allow="fullscreen", и URL-адресом фрейма Games I Know.
Шаг 2
Сформировать URL-адрес фрейма
Создайте каталог /embed/{gameSlug}/frame/ с идентификатором арендатора (tenantId) и необязательным идентификатором кампании (campaignId) из конфигурации среды или среды выполнения.
Шаг 3
Слушайте с помощью @HostListener или сервиса.
Обрабатывать события оконных сообщений и фильтровать данные по параметру data.source === "gamesiknow" для значений GAME_STARTED и completion.
Шаг 4
Перед получением вознаграждения необходимо провести проверку.
Если приложение Angular открывает доступ к контенту, перешлите подписанные токены на свой бэкэнд и проверьте их с помощью ключа партнерского сервера, прежде чем предоставлять вознаграждения.
Выполнение
Примечания к реализации Angular
Сохраняйте стабильность источника iframe на протяжении циклов обнаружения изменений и отписывайтесь от обработчиков сообщений при удалении.
Избегайте повторного монтирования iframe
Не создавайте заново iframe при каждом проходе проверки изменений. Привязывайте src один раз, если не меняются арендатор или игра.
Используйте очистку ngOnDestroy.
Удаляйте обработчики сообщений при уничтожении компонента, чтобы предотвратить дублирование обработчиков в режиме разработки.
Отделение пользовательского интерфейса от проверки
Angular позволяет быстро отображать информацию о победителе, но распределение наград и призов должно осуществляться на стороне сервера.
Доступные игры
Выберите игру, подходящую для этой страницы.
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 настройка
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 настройка
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed настройка
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed настройка
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed настройка
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed настройка
Часто задаваемые вопросы
Часто задаваемые вопросы о Игровой виджет Angular
В чем разница между /embed/{gameSlug}/ и /embed/{gameSlug}/frame/?
Используйте /embed/{gameSlug}/frame/ в качестве src для iframe. Этот маршрут представляет собой легковесный игровой фрейм, созданный для веб-страниц embed и событий postMessage. Маршрут /embed/{gameSlug}/ - это страница для публичного предварительного просмотра и SEO-оптимизации, а не маршрут, который следует размещать внутри iframe.
Нужно ли посетителям скачивать приложение или создавать учетную запись?
Нет. Посетители могут играть в браузере iframe на телефоне, планшете, ноутбуке или настольном компьютере. Партнерский аккаунт нужен только владельцу сайта, который устанавливает embed.
Могу ли я ограничить использование embed только своим собственным доменом?
Да. Games I Know и embed разработаны для зарегистрированных веб-сайтов и настроек арендаторов с ограничениями по домену, поэтому скопированный код iframe нельзя свободно использовать на неавторизованных сайтах.
Какие названия Games I Know в настоящее время доступны для embed?
Игры Tic Tac Toe, Four in a Row, Bingo и I Know доступны в качестве браузерных игр, поддерживающих embed. В документации к embed используется одна и та же модель событий для всех поддерживаемых игр.
Является ли Games I Know библиотекой Angular или пакетом npm?
Нет. Games I Know и embed основаны на iframe, что обеспечивает легковесность интеграции в Angular, React, Next.js, Astro и других стеках.
Готовы добавить браузерную игру?
Создайте партнерский аккаунт, зарегистрируйте свой домен и сгенерируйте для своего веб-сайта iframe с ограничением доступа к домену.