पतली घटक परत
आपका एंगुलर कंपोनेंट केवल iframe को रेंडर करता है, आयाम सेट करता है और वैकल्पिक इवेंट आउटपुट को वायर करता है।
एंगुलर गेम विजेट
ब्राउज़र गेम के लिए एंगुलर गेम विजेट
एंगुलर एप्लिकेशन बंडल में गेम इंजन आयात किए बिना एक प्लेएबल ब्राउज़र गेम बना सकते हैं। एक कंपोनेंट में एक रेंडर करें, फ्रेम यूआरएल को सुरक्षित रूप से बाइंड करें, और होस्ट ऐप को गेमप्ले सिग्नल की आवश्यकता होने पर पोस्टमैसेज इवेंट्स की सदस्यता लें।
घटक टेम्पलेट
संदेश श्रोता
उत्तरदायी iframe
हस्ताक्षरित समापन समर्थन
संक्षिप्त जवाब
पहले फ्रेम रूट का उपयोग करें, फिर पेज कॉन्टेक्स्ट जोड़ें।
Angular में, iframe के साथ एक कंपोनेंट बनाएं जो /embed/{gameSlug}/frame/ की ओर इंगित करता है, क्वेरी स्ट्रिंग में tenantId पास करें, और विंडो मैसेज इवेंट्स के लिए सुनें जहां data.source gamesiknow है।
एंगुलर-अनुकूल गेम विजेट को आज़माएँ
यह डेमो iframe और पैरेंट-पेज इवेंट्स को दिखाता है जिन्हें आपकी एंगुलर सर्विस या कंपोनेंट हैंडल कर सकता है।
एंगुलर डेवलपर एक गेम जोड़ रहे हैं embed
एंगुलर टीमें iframe विजेट का उपयोग क्यों करती हैं?
एक iframe गेम रनटाइम को आपके एंगुलर बंडल से बाहर रखता है, जबकि सेवाओं या घटकों में टाइप किए गए इवेंट हैंडलिंग की अनुमति भी देता है।
ऐप में कोई गेम लॉजिक नहीं है
बोर्ड के नियम, संपत्तियां और रीयलटाइम व्यवहार Games I Know फ्रेम रूट के अंदर ही रहते हैं।
फ्रेमवर्क-सुरक्षित सीमा
गेम के आंतरिक घटकों से जुड़े बिना @HostListener या एक समर्पित संदेश सेवा का उपयोग करें।
सेटअप प्रवाह
Angular में गेम विजेट को कैसे embed करें
एक स्टैंडअलोन या फीचर कंपोनेंट बनाएं, एक स्थिर फ्रेम यूआरएल को बाइंड करें, और कंपोनेंट के नष्ट होने पर लिसनर्स को साफ करें।
चरण 1
एक GameWidgetComponent बनाएं
iframe को 100% चौड़ाई, लगभग 640px की स्थिर ऊंचाई, allow="fullscreen" और Games I Know फ्रेम URL के साथ जोड़ें।
चरण 2
फ्रेम यूआरएल बनाएं
/embed/{gameSlug}/frame/ को एनवायरनमेंट या रनटाइम कॉन्फ़िगरेशन से टेनेंट आईडी और वैकल्पिक कैंपेन आईडी के साथ कंपोज़ करें।
चरण 3
@HostListener या किसी सेवा के साथ सुनें
विंडो संदेश इवेंट को हैंडल करें और GAME_STARTED और पूर्णता के लिए data.source === "gamesiknow" पर फ़िल्टर करें।
चरण 4
पुरस्कार देने से पहले सत्यापन करें
यदि एंगुलर ऐप कंटेंट को अनलॉक करता है, तो पुरस्कार देने से पहले हस्ताक्षरित टोकन को अपने बैकएंड पर भेजें और पार्टनर सर्वर कुंजी के साथ सत्यापित करें।
कार्यान्वयन
एंगुलर कार्यान्वयन संबंधी नोट्स
परिवर्तन पहचान चक्रों के दौरान iframe स्रोत को स्थिर रखें और नष्ट होने पर संदेश हैंडलर से सदस्यता समाप्त करें।
iframe को पुनः माउंट करने से बचें
प्रत्येक परिवर्तन पहचान प्रक्रिया के दौरान iframe को पुनः निर्मित न करें। किरायेदार या गेम में परिवर्तन होने तक स्रोत को केवल एक बार ही बाइंड करें।
ngOnDestroy क्लीनअप का उपयोग करें
कंपोनेंट के नष्ट होने पर मैसेज लिसनर को हटा दें ताकि डेवलपर मोड में डुप्लिकेट हैंडलर को रोका जा सके।
यूआई को सत्यापन से अलग करें
एंगुलर विजेता का यूआई जल्दी प्रदर्शित कर सकता है, लेकिन क्रेडिट और पुरस्कार सर्वर-साइड पर तय किए जाने चाहिए।
उपलब्ध खेल
वह गेम चुनें जो पेज के लिए उपयुक्त हो
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 सेटअप
अक्सर पूछे जाने वाले प्रश्न
एंगुलर गेम विजेट के बारे में सामान्य प्रश्न
/embed/{gameSlug}/ और /embed/{gameSlug}/frame/ के बीच क्या अंतर है?
/embed/{gameSlug}/frame/ को 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 एक एंगुलर लाइब्रेरी है या एनपीएम पैकेज?
नहीं। Games I Know embed iframe पर आधारित हैं, जो एंगुलर, रिएक्ट, Next.js, एस्ट्रो और अन्य स्टैक में एकीकरण को हल्का रखता है।
क्या आप ब्राउज़र गेम जोड़ने के लिए तैयार हैं?
एक पार्टनर खाता बनाएं, अपना डोमेन पंजीकृत करें और अपनी वेबसाइट के लिए डोमेन-प्रतिबंधित iframe जेनरेट करें।