يمكن أن تختلف الأسهم في المتاجر عبر الإنترنت ، ولكن كيفية جعلها ممتعة بصريًا لأحد العملاء هي دائمًا سؤال ، حاولنا تحويل سهم مشترك به إحصائيات منتظمة للعميل إلى لعبة في أنماط Dendy.
هنا سنتحدث عن كيفية تصور أفكار التسويق لتحفيز العملاء في لعبة صغيرة للمتصفح.المرحلة 1. من الفكرة إلى فهم ما هو مطلوب
يوم جيد (قبل بداية الصيف) ، فكرة تنظيم حملة تحفيزية للاتجاه بالجملة للعملاء الناضجين في قسم التسويق. من البيانات المصدر ، كالعادة ، كان لدينا ما يلي:
- بعض معرف العميل
- مقاييس العملاء
- ما هو المبلغ الإجمالي الذي اشترى العميل لفترة معينة من الوقت
- ما هي العلامات التجارية التي حصل عليها العميل خلال هذه الفترة الزمنية؟
- كيف "بصراحة" ومسؤولية العميل الوفاء بواجباته لنا تجاه موردي المنتجات
- ما هي شروط الأسعار "الخاصة" التي يقوم بها العميل بناءً على عمله معنا
- بعض مجموعة من أدوات التحفيز.
- قائمة "الهدايا" التي يمكننا تقديمها للعميل لتعاونه وأدائه
- "محسنات" عروض سعره الحالية
- بعض "جائزة السوبر" لأكثر ... الأكثر ... العميل الأكثر مسؤولية ونشطة.
- نقطة تركيز العملاء هي حساب شخصي مع نظام الطلب عبر الإنترنت حيث يمكننا تقديم شيء والإبلاغ عن شيء مهم.
- برنامج المحاسبة ("الأصفر") - حيث توجد معلومات عامة لكل معرف عميل ومؤشراته.
باستخدام هذه المجموعة من البيانات ، يمكنك التنظيم أثناء التنقل في حسابك الشخصي:
- شعار + "اشتر هذا واحصل على هذا"
- أو جدول مع معلمات العميل ، حيث يمكنك مرة واحدة في اليوم تحميل البيانات من برنامج المحاسبة
- نظرًا لأن الموقع على 1C-Bitrix ، يمكنك إنشاء "قواعد سلة" معقدة لتطبيق بعض الخصومات إذا تم استيفاء شروط معينة بناءً على معرف العميل أو إنشاء منطق خاص بك داخل واجهة برمجة التطبيقات مع عرض بعض الإحصاءات.
لقد فعلنا كل هذا ونفعل ذلك لإبلاغ عملائنا. لكن في هذه الحالة أردت تجربة شيء آخر - لإنشاء لعبة - حيث سيتم تصور المؤشرات بكميات مجردة.
المرحلة 2. إذن ، نحن نصنع اللعبة والآن تبدو المعارف التقليدية هكذا
موضوعنا هو قطع الغيار والجزء الأكبر - مبيعات الجملة من قطع غيار السيارات ، وفقا لهذا ، تم تحديد الهيكل التالي لمنطق اللعبة:
- في دائرة الضوء - المسار الذي يجب أن تتحرك فيه السيارة
- يبدأ المسار في مكان ما وينتهي في مكان ما (البداية والنهاية) ، أي أن للطول طول معين بالكيلومترات.
- البداية هي نقطة مرجعية لمؤشر - "الطريقة التي مرت"
- خط النهاية هو نقطة النهاية عند الوصول والتي يمكننا أن نوفر للعميل امتياز خاص أو جائزة قيمة للغاية.
- يجب أن تكون هناك نقاط توقف على المسار (قد يكون هذا عقبة ، وقف لاتخاذ قرار).
- نقطة القرار (نقطة التفتيش) - يجب أن تعطي العميل "كعكة" والعودة إلى بداية أو رفض "كعكة" والمضي قدما.
- عقبة - يجب تغيير بعض المؤشرات.
- لحركة السيارة سيتم استخدام الوقود.
- الوقود عبارة عن تجريد ، حيث يتلقى العميل منه لمراقبة شروط المبيعات + لإنجاز المهام / المهام.
- استهلاك الوقود لكل 100 كم. في السيارة - هذا أيضًا تجريد يعتمد على مؤشرات "الصدق" و "مسؤولية" العميل ، وفقًا لالتزاماته تجاهنا كموردين.
- يجب أن يكون استهلاك الوقود في نوع من التدرج وفي حدود معقولة.
بمساعدة "عظيم وقوي" ، اتضح أن المهمة الكبيرة تقسم إلى مهام فرعية صغيرة والتوصل إلى فهم لأداة اختيار التنفيذ. من أجل عدم إنشاء سيارة "ذات عجلتين" لتنظيم ميكانيكا حركة السيارات ، تم اختيار لصالح استخدام إطار JavaScript.
متطلبات إطار اللعبة التي حددناها لأنفسنا هي كما يلي:
- خريطة 2D
- خريطة العفاريت
- نموذج الحدث
- "بداية سريعة"
- الوثائق
في المجموع ، تم استعراض واختبار 3-5 حلول معروفة (بما في ذلك PointJS غير معروفة). تم اعتبار كل ذلك محركات رائعة حقًا لإنشاء الألعاب ، لكنك كنت بحاجة إلى شيء سهل وتم اختيار السحر.
Enchantjs هو محرك بسيط مع مجموعة الأدوات اللازمة لإنشاء لعبة ثنائية الأبعاد بسيطة.
المرحلة 3. التصميم الفني
بعد لعبنا بما فيه الكفاية مع Enchantjs ، حان الوقت لتحديد مخطط تطبيق صغير.
- الجداول والبيانات المراد حفظها (الحديث عن MySQL)- جدول ملخص لبيانات اللاعب الحالية (البيانات التي تؤثر على المعلمات الحالية للعبة). يتم تعديل هذا الجدول جزئيًا أثناء اللعبة ، جزئيًا من برنامج المحاسبة.
- التغييرات في لتر البنزين. هذه هي التجارب التي يمكن للعميل أن يملأها في سيارته الافتراضية. يجب أن تأتي هذه البيانات فقط من برنامج المحاسبة.
- تاريخ التغييرات الأميال. حيث وصل العميل إلى سيارته ، حيث نفد الغاز ، حيث أخذ نقطة التفتيش.
- تغييرات استهلاك الوقود. على سبيل المثال ، اليوم يستهلك العميل سيارة من 9 لترات. 100km ، وغدا كانت هناك تعليقات على العميل وسيارته زيادة الاستهلاك إلى 11 لترا. لكل 100 كم.
- Infoblock in 1C-Bitrix ، حيث سيقوم اختصاصيو التسويق بإدخال المهام للعملاء. (قم بذلك ... ثم ... هنا ، تأكد من صورة أو رابط وستحصل على الحلوى أو الاستهلاك المنخفض)
- جدول مع مهام العملاء المكتملة.
- جدول نقاط التفتيش. (مطلوب لرسم العفاريت مع الأعلام على خريطة اللعبة)
- جدول الهدايا التي يمكن أن نقدمها للعميل عند نقطة التفتيش.
- جدول نقاط التفتيش التي تم جمعها. (وصل العميل إلى نقطة التفتيش ، واختار هدية وقمنا بتدوينها)
- تاريخ استهلاك / وصول لتر البنزين. وهذا هو ، عند القيادة هناك حساب ، عند التزود بالوقود في علبة - هناك وصول الوقود. هناك حاجة إلى هذه البيانات لإبلاغ العميل.
- المكون 1C - Bitrix- قالب المكون العام
- معالجة طلبات المستخدم أثناء اللعبة
- معالجة الأحداث التي تحدث في مجال اللعبة
- معالجة الإجراءات التي يؤديها المستخدم في واجهة إدارة اللعبة
- الوحدة 1C - Bitrix- ORM من جميع الجداول المطلوبة
- بعض عمليات الخدمة
- وكلاء
- API للمشاركة مع برنامج المحاسبةمعالجة طلبات البيانات حول برنامج محاسبة اللعبة.
معالجة طلبات توفير البيانات على برامج محاسبة اللاعبين.
المرحلة 4. تنفيذ مشهد اللعبة
في التطبيق ، سأقدم مثالاً فقط حول ما يتعلق بسحر اللعبة والمشهد.
نحتاج أولاً إلى إنشاء مشهد وتكوين خريطة للعبة.
بنيت الخريطة من مجموعة من المصفوفات ، حيث يصف كل صف متداخل رقم الخلية من العفريت الأصلي لمواد الخريطة.
أجزاء من الخريطة التي سيتم استخدامها في بناء مشهد اللعبةenchant();
حصلت على بناء الجملة الأساسي لإنشاء مشهد لعبة وإطلاق اللعبة.
خلاصة القول هي أننا نرسم مستطيلًا على صفحات HTML التي سنتعامل معها مع العفاريت.
يجب أن أقول على الفور أنه عند تنفيذ اللعبة ، كان علي أن أتخلى عن نموذج الحدث الساحر ومفهوم أن جميع الإجراءات تحدث كجزء من مشهد التغيير تحت تأثير قيمة إطار في الثانية.حدد المشهد الرئيسي للعبة ، ارسم خريطة ، ضع الأعلام وضبط الجهاز على البداية.
var SceneGame=Class.create(Scene,{ initialize:function(){ Scene.apply(this); game = Game.instance; var label=new Label(' ');
نتيجة لذلك ، حصلنا على مشهد بخريطة يوجد بها طريق. في لقطة الشاشة ، لم يتم الإشارة إلى الأعلام ولم يتم تثبيت السيارة في البداية (الزاوية السفلية اليسرى).
يحتوي كل كائن sprite في enchantjs على الأقل باستمرار على معلومات حول الموضع في نظام الإحداثيات ، وحول زاوية تدوير العفريت.
أي من أجل تنفيذ حركة السيارة على خريطة مرسومة ، استغرق الأمر:
- وصف تصرفاتها في الفضاء عند الوصول إلى منعطف المسار
- صف تصرفات السيارة واتجاه حركتها اعتمادًا على زاوية دوران العفريت.
أي إذا كانت لدينا زاوية دوران تساوي 0 ونظرًا لأن شبح سيارتنا يبدأ من أسفل إلى أعلى ، فإننا ننتقل إلى أصفار محور الإحداثيات على طول محور Y. وبعد ذلك نواجه منحنى المسار رقم 1 وعلينا تدوير شبح السيارة 90 درجة. علاوة على ذلك ، مع العلم أننا موجودون بزاوية 90 درجة ، فإننا نتحرك على طول المحور X حتى منحنى المسار رقم 2 ، إلخ.
لذلك علمنا السيارة أن تتحرك على طول نظام الإحداثيات المرسومة.
من أجل جعل تفاعل السيارة مع الطريق إلى القيم المألوفة لدينا - في المسافة بالكيلومترات المقطوعة ، كان من الضروري كتابة وظيفة إضافية تأخذ عدد الكيلومترات. من 0 إلى 3000 وإرجاع إحداثيات النقطة في قسم الطريق.
لحركة السيارة ، استخدمنا
setInterval مما يزيد من قيم x أو y أثناء تحرك السيارة
الخريطة ، آلة كاتبة ، أعلام أثناء الحركة ، تحدث الأحداث في مشهد اللعبة:
- ضرب الأعلام
- نهاية الوقود
- الوصول إلى خط النهاية
عند الوصول إلى هذه الأحداث ، يتم إنشاء الأحداث التي تتم معالجتها في البرنامج النصي للتحكم في مكون 1C-Bitrix.
المزيد ... المزيد
الخطوات التالية لإكمال نظام اللعبة كانت:
- إنشاء واجهة مع أزرار التحكم
- رد الفعل على الأحداث في الميدان مع اللعبة
- التغييرات في معلمات اللعبة وفقًا لإجراءات المستخدم
- فحص معلمات السيارة في النهاية الخلفية
والنتيجة هي مثل هذه اللعبة في LC