سطح مكون صغير
كل ما يحتاجه مكون React الخاص بك هو عرض iframe، وتحديد حجمه، وإدارة معالجات الأحداث بشكل اختياري.
أداة لعبة تفاعلية
أداة ألعاب React لألعاب المتصفح
لا تحتاج فرق React إلى بناء لعبة من الصفر لإضافة عنصر واجهة مستخدم قابل للتشغيل. ما عليك سوى عرض عنصر Games I Know iframe داخل مكون React، وتمرير عنوان URL الخاص بالإطار، والاستماع إلى أحداث postMessage عندما يحتاج التطبيق الرئيسي إلى حالة اللعبة.
مكون الإطار المضمن (Iframe)
مستمع رسائل React
غلاف متجاوب
دعم إتمام التوقيع
إجابة مختصرة
استخدم مسار الإطار، ثم أضف سياق الصفحة.
في React، قم بإنشاء مكون صغير iframe لـ /embed/{gameSlug}/frame/، وقم بتمرير tenantId كمعامل URL، وقم بإرفاق مستمع رسائل لأحداث Games I Know.
جرّب أداة اللعبة المتوافقة مع React
يعرض العرض التوضيحي iframe وأحداث الصفحة الرئيسية التي يمكن لتطبيق React الخاص بك الاشتراك فيها.
مطورو React يضيفون لعبة embed
لماذا تستخدم فرق React عنصر واجهة مستخدم iframe؟
يحافظ iframe على فصل وقت تشغيل اللعبة عن تطبيقك مع السماح في الوقت نفسه بالتكامل القائم على الأحداث.
لا يوجد حزمة محرك ألعاب
لا تزيد اللعبة من حجم حزمة تطبيق React الخاص بك من خلال منطق اللوحة أو الأصول أو التعليمات البرمجية في الوقت الفعلي.
حدود تكامل واضحة
يمكن للتطبيق الرئيسي التفاعل مع الأحداث دون الارتباط المباشر بتفاصيل اللعبة الداخلية.
تدفق الإعداد
كيفية إنشاء عنصر واجهة مستخدم للعبة في React باستخدام embed
قم بتغليف iframe في مكون، وقم بتخزين عنوان URL للإطار مؤقتًا إذا لزم الأمر، وقم بتنظيف مستمعي الرسائل عند إلغاء التحميل.
الخطوة 1
أنشئ مكون GameWidget
قم بعرض iframe بعرض 100%، وارتفاع ثابت، و allow="fullscreen"، وعنوان URL للإطار Games I Know.
الخطوة 2
تمرير تكوين المستأجر
قم بإنشاء ملف المصدر باستخدام معرف المستأجر الخاص بك ومعرف الحملة الاختياري حتى تظل بيانات لوحة التحكم الخاصة بك منظمة.
الخطوة 3
استمع في useEffect
قم بإرفاق window.addEventListener("message", handler) وقم بتصفية الرسائل حيث يكون مصدر البيانات هو gamesiknow.
الخطوة 4
تحقق قبل المكافآت
إذا كان تطبيق React يفتح المكافآت، فاتصل بالخادم الخلفي الخاص بك وتحقق من النتائج الموقعة قبل منح أي شيء.
تطبيق
ملاحظات حول تنفيذ React
اجعل مكون iframe بسيطًا. معظم الأخطاء ناتجة عن عدم استقرار حجمه، أو وجود مستمعين مكررين، أو الاعتماد المفرط على رسائل المتصفح.
استخدم مفتاحًا ثابتًا
لا تقم بإعادة تحميل iframe في كل عملية عرض رئيسية. حافظ على استقرار src ما لم تتغير إعدادات اللعبة أو المستأجر.
تنظيف المستمعين
قم بإرجاع دالة تنظيف من useEffect حتى لا يترك وضع تطوير React معالجات أحداث مكررة.
افصل واجهة المستخدم عن عملية التحقق
يمكن لـ 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 setup
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 setup
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed setup
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed setup
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed setup
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed setup
التعليمات
أسئلة شائعة حول أداة لعبة تفاعلية
ما الفرق بين /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 التي يمكن إدراجها حاليًا في embeddable؟
تتوفر الألعاب Tic Tac Toe، وFour in a Row، وBingo، وI Know كألعاب متصفح قابلة للتنزيل باستخدام embed. يستخدم توثيق embed نفس نموذج الأحداث في جميع الألعاب المدعومة.
هل Games I Know عبارة عن حزمة React؟
لا، Games I Know و embed تعتمد على iframe. هذا يجعل الإعداد مستقلاً عن إطار العمل مع استمراره في العمل بسلاسة داخل مكونات React.
هل أنت مستعد لإضافة لعبة متصفح؟
أنشئ حساب شريك، وسجل نطاقك، وقم بإنشاء iframe مقيد بالنطاق لموقعك الإلكتروني.