طبقة مكونة رقيقة
يقوم مكون Angular الخاص بك فقط بعرض iframe، وتعيين الأبعاد، وتوصيل مخرجات الأحداث الاختيارية.
أداة لعبة Angular
أداة ألعاب Angular لألعاب المتصفح
يمكن لتطبيقات Angular تشغيل لعبة متصفح قابلة للعب دون استيراد محرك ألعاب إلى الحزمة. قم بعرض عنصر GIK_TERM_0 أو GIK_TERM_2 في مكون، واربط عنوان URL للإطار بأمان، واشترك في أحداث postMessage عندما يحتاج التطبيق المضيف إلى إشارات اللعب.
قالب المكون
مستمع الرسائل
استجابة iframe
دعم إتمام التوقيع
إجابة مختصرة
استخدم مسار الإطار، ثم أضف سياق الصفحة.
في Angular، قم بإنشاء مكون مع iframe يشير إلى /embed/{gameSlug}/frame/، وقم بتمرير tenantId في سلسلة الاستعلام، واستمع إلى أحداث رسائل النافذة حيث يكون data.source هو gamesiknow.
جرّب أداة اللعبة المتوافقة مع Angular
يعرض العرض التوضيحي أحداث iframe وأحداث الصفحة الأصلية التي يمكن لخدمة أو مكون Angular الخاص بك التعامل معها.
مطورو Angular يضيفون لعبة embed
لماذا تستخدم فرق Angular عنصر واجهة مستخدم iframe؟
يحافظ iframe على وقت تشغيل اللعبة خارج حزمة Angular الخاصة بك مع السماح في الوقت نفسه بمعالجة الأحداث المكتوبة في الخدمات أو المكونات.
لا يوجد منطق ألعاب في التطبيق
تبقى قواعد اللوحة والأصول والسلوك في الوقت الفعلي داخل مسار الإطار Games I Know.
إطار عمل - حدود آمنة
استخدم @HostListener أو خدمة رسائل مخصصة دون ربطها بتفاصيل اللعبة الداخلية.
تدفق الإعداد
كيفية embed عنصر واجهة مستخدم لعبة في Angular
قم بإنشاء مكون مستقل أو مكون خاص بالميزة، وقم بربط عنوان URL ثابت للإطار، وقم بتنظيف المستمعين عند تدمير المكون.
الخطوة 1
أنشئ مكون GameWidgetComponent
أضف iframe بعرض 100%، وارتفاع ثابت يقارب 640 بكسل، و allow="fullscreen"، وعنوان URL للإطار Games I Know.
الخطوة 2
قم بإنشاء عنوان URL للإطار
قم بتكوين /embed/{gameSlug}/frame/ باستخدام tenantId و campaignId الاختياري من بيئة التكوين أو وقت التشغيل.
الخطوة 3
استمع باستخدام @HostListener أو خدمة أخرى.
معالجة أحداث رسائل النافذة وتصفية البيانات بناءً على مصدر البيانات === "gamesiknow" لـ GAME_STARTED والإكمال.
الخطوة 4
تحقق قبل المكافآت
إذا كان تطبيق Angular يفتح المحتوى، فقم بإعادة توجيه الرموز الموقعة إلى الواجهة الخلفية الخاصة بك وتحقق منها باستخدام مفتاح خادم الشريك قبل منح المكافآت.
تطبيق
ملاحظات حول تطبيق Angular
حافظ على استقرار مصدر iframe عبر دورات اكتشاف التغيير وقم بإلغاء الاشتراك من معالجات الرسائل عند التدمير.
تجنب إعادة تركيب iframe
لا تقم بإعادة إنشاء iframe في كل عملية كشف للتغييرات. اربط المصدر مرة واحدة فقط ما لم تحدث تغييرات في المستأجر أو اللعبة.
استخدم 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 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
التعليمات
أسئلة شائعة حول أداة لعبة Angular
ما الفرق بين /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 مكتبة Angular أم حزمة npm؟
لا. Games I Know embed تعتمد على iframe، مما يحافظ على التكامل خفيف الوزن في Angular و React و Next.js و Astro وغيرها من الحزم.
هل أنت مستعد لإضافة لعبة متصفح؟
أنشئ حساب شريك، وسجل نطاقك، وقم بإنشاء iframe مقيد بالنطاق لموقعك الإلكتروني.