작은 부품 표면
React 컴포넌트는 iframe을 렌더링하고 크기를 조정하며, 선택적으로 이벤트 핸들러를 관리하기만 하면 됩니다.
React 게임 위젯
브라우저 게임용 React 게임 위젯
React 개발팀은 플레이 가능한 위젯을 추가하기 위해 게임을 처음부터 만들 필요가 없습니다. React 컴포넌트 내부에 `Games I Know` 또는 `iframe`을 렌더링하고, 프레임 URL을 전달한 다음, 상위 앱에서 게임 상태가 필요할 때 `postMessage` 이벤트를 수신하면 됩니다.
iframe 구성 요소
리액트 메시지 리스너
반응형 래퍼
서명 완료 지원
간단히 답변
프레임 경로를 사용한 다음 페이지 컨텍스트를 추가하세요.
React에서 /embed/{gameSlug}/frame/에 대한 작은 iframe 컴포넌트를 생성하고, tenantId를 URL 매개변수로 전달하고, Games I Know 이벤트에 대한 메시지 리스너를 연결합니다.
React 친화적인 게임 위젯을 사용해 보세요.
이 데모는 React 앱에서 구독할 수 있는 iframe 및 상위 페이지 이벤트를 보여줍니다.
React 개발자들이 게임을 추가하고 있습니다. embed
React 팀에서 iframe 위젯을 사용하는 이유
iframe은 이벤트 기반 통합을 허용하면서도 게임 런타임을 앱과 분리된 상태로 유지합니다.
게임 엔진 번들 없음
이 게임은 보드 로직, 에셋 또는 실시간 코드로 인해 React 애플리케이션 번들 크기를 늘리지 않습니다.
명확한 통합 경계
부모 앱은 게임 내부와 직접 연결하지 않고도 이벤트에 반응할 수 있습니다.
설정 흐름
React에서 게임 위젯을 embed하는 방법
iframe을 컴포넌트로 감싸고, 필요한 경우 프레임 URL을 메모이제이션하고, 마운트 해제 시 메시지 리스너를 정리합니다.
단계 1
GameWidget 컴포넌트를 생성합니다.
너비 100%, 고정 높이, allow="fullscreen" 및 Games I Know 프레임 URL을 사용하여 iframe을 렌더링합니다.
단계 2
테넌트 구성 전달
대시보드 데이터가 체계적으로 유지되도록 테넌트 ID와 (선택 사항인) 캠페인 ID를 사용하여 소스를 생성하세요.
단계 3
청취 사용 효과
window.addEventListener("message", handler)를 추가하고 data.source가 gamesiknow인 메시지를 필터링합니다.
단계 4
보상 받기 전에 확인하세요
React 앱에서 보상을 잠금 해제하는 경우, 보상을 지급하기 전에 백엔드에 접속하여 서명된 결과를 확인하세요.
구현
React 구현 참고 사항
iframe 컴포넌트는 단순하게 유지하세요. 대부분의 버그는 불안정한 크기 조정, 중복된 리스너 또는 브라우저 메시지를 지나치게 신뢰하는 데서 발생합니다.
안정적인 키를 사용하세요
모든 상위 렌더링에서 iframe을 다시 마운트하지 마십시오. 게임이나 테넌트 설정이 변경되지 않는 한 소스를 안정적으로 유지하십시오.
청취자 정리
React 개발 모드에서 중복된 이벤트 핸들러가 남지 않도록 useEffect에서 정리 함수를 반환합니다.
사용자 인터페이스와 검증 기능을 분리하세요.
React를 사용하면 결과를 빠르게 보여줄 수 있지만, 상금이나 크레딧 지급 결정은 서버에서 이루어져야 합니다.
이용 가능한 게임
페이지에 맞는 게임을 선택하세요
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 설정
자주 묻는 질문
React 게임 위젯에 대한 자주 묻는 질문
/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은 React 패키지인가요?
아니요. Games I Know 및 embed은 iframe 기반입니다. 이렇게 하면 설정이 프레임워크에 구애받지 않으면서도 React 컴포넌트 내에서 깔끔하게 작동합니다.
브라우저 게임을 추가할 준비가 되셨나요?
파트너 계정을 만들고 도메인을 등록한 다음 웹사이트에 대해 도메인 제한이 있는 iframe을 생성하세요.