얇은 구성 요소 층
Angular 컴포넌트는 iframe만 렌더링하고, 크기를 설정하고, 선택적 이벤트 출력을 연결합니다.
Angular 게임 위젯
브라우저 게임용 Angular 게임 위젯
Angular 애플리케이션은 게임 엔진을 번들에 가져오지 않고도 플레이 가능한 브라우저 게임을 만들 수 있습니다. 컴포넌트에서 프레임을 렌더링하고, 프레임 URL을 안전하게 바인딩하고, 호스트 앱에서 게임 플레이 신호가 필요할 때 postMessage 이벤트를 구독할 수 있습니다.
컴포넌트 템플릿
메시지 리스너
반응형 iframe
서명 완료 지원
간단히 답변
프레임 경로를 사용한 다음 페이지 컨텍스트를 추가하세요.
Angular에서 iframe이 /embed/{gameSlug}/frame/을 가리키도록 컴포넌트를 생성하고, 쿼리 문자열에 tenantId를 전달하고, data.source가 gamesiknow인 창 메시지 이벤트를 수신합니다.
Angular와 호환되는 게임 위젯을 사용해 보세요.
이 데모는 Angular 서비스 또는 컴포넌트가 처리할 수 있는 iframe 및 부모 페이지 이벤트를 보여줍니다.
Angular 개발자가 게임을 추가합니다. embed
Angular 팀에서 iframe 위젯을 사용하는 이유는 무엇일까요?
iframe은 게임 런타임을 Angular 번들 외부에 유지하면서도 서비스 또는 컴포넌트에서 타입이 지정된 이벤트 처리를 허용합니다.
앱에 게임 로직이 없습니다.
보드 규칙, 자산 및 실시간 동작은 Games I Know 프레임 경로 내에 유지됩니다.
프레임워크 안전 경계
게임 내부 코드와 연동하지 않고 @HostListener 또는 전용 메시지 서비스를 사용하세요.
설정 흐름
Angular에서 게임 위젯을 embed하는 방법
독립형 또는 기능 구성 요소를 생성하고, 안정적인 프레임 URL을 바인딩하고, 구성 요소가 소멸될 때 리스너를 정리합니다.
단계 1
GameWidgetComponent를 생성합니다.
너비 100%, 높이 약 640px, allow="fullscreen" 속성을 가진 iframe 요소와 Games I Know 프레임 URL을 추가하세요.
단계 2
프레임 URL을 생성하세요
환경 변수 또는 런타임 구성에서 가져온 tenantId와 선택적 campaignId를 사용하여 /embed/{gameSlug}/frame/을 구성합니다.
단계 3
@HostListener 또는 다른 서비스를 통해 청취하세요.
창 메시지 이벤트를 처리하고 data.source === "gamesiknow"인 경우 GAME_STARTED 및 완료 정보를 필터링합니다.
단계 4
보상 받기 전에 확인하세요
Angular 앱이 콘텐츠를 잠금 해제하는 경우, 서명된 토큰을 백엔드로 전달하고 파트너 서버 키로 확인한 후 보상을 지급하세요.
구현
Angular 구현 참고 사항
iframe 소스를 변경 감지 주기 전반에 걸쳐 안정적으로 유지하고, 삭제 시 메시지 핸들러 구독을 해제합니다.
iframe을 다시 마운트하지 마십시오.
변경 감지 과정마다 iframe을 다시 생성하지 마십시오. 테넌트 또는 게임이 변경되지 않는 한 src를 한 번만 바인딩하십시오.
ngOnDestroy 정리를 사용하세요
개발 모드에서 중복된 핸들러가 발생하는 것을 방지하기 위해 컴포넌트가 소멸될 때 메시지 리스너를 제거합니다.
사용자 인터페이스와 검증 기능을 분리하세요.
Angular는 승자 UI를 빠르게 표시할 수 있지만, 크레딧과 상품은 서버 측에서 결정해야 합니다.
이용 가능한 게임
페이지에 맞는 게임을 선택하세요
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/의 차이점은 무엇입니까?
iframe의 소스 경로로는 /embed/{gameSlug}/frame/을 사용하세요. 이 경로는 웹사이트 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을 생성하세요.