🕒 💽 🚰 ग्राहक की प्रेरणा के लिए भूल गए enchantjs + नए 1C-Bitrix = गेम 🍨 🎗️ 🕴🏽

ऑनलाइन स्टोर में स्टॉक अलग-अलग हो सकते हैं, लेकिन उन्हें ग्राहक के लिए नेत्रहीन कैसे दिलचस्प बनाया जाए यह हमेशा एक सवाल है, हमने एक सामान्य स्टॉक को चालू करने की कोशिश की जिसमें डेंडी शैलियों में एक गेम में नियमित ग्राहक आंकड़े हैं।

यहां हम इस बारे में बात करेंगे कि ग्राहकों को प्रेरित करने के लिए विपणन विचारों को ब्राउज़र के लिए एक छोटे से खेल में कैसे देखा जा सकता है।

चरण 1. विचार से लेकर समझने की आवश्यकता है

एक ठीक दिन (गर्मी की शुरुआत से पहले), विपणन विभाग में परिपक्व ग्राहकों की थोक दिशा के लिए एक प्रेरक अभियान आयोजित करने का विचार है। स्रोत डेटा से, हमेशा की तरह, हमारे पास निम्नलिखित थे:

कुछ ग्राहक आई.डी.
ग्राहक मेट्रिक्स
- ग्राहक एक निश्चित अवधि के लिए खरीदी गई कुल राशि क्या है
- इस अवधि के दौरान ग्राहक द्वारा कौन से ब्रांड हासिल किए गए?
- कैसे "ईमानदारी से" और जिम्मेदारी से ग्राहक उत्पादों के आपूर्तिकर्ताओं के रूप में हमारे लिए अपने कर्तव्यों को पूरा करता है
- क्या "विशेष" मूल्य की स्थिति ग्राहक हमारे साथ अपने काम पर आधारित है
प्रेरणा उपकरणों के कुछ सेट।
- "उपहार" की सूची जो हम ग्राहक को उसके सहयोग और प्रदर्शन के लिए दे सकते हैं
- अपने वर्तमान मूल्य प्रस्तावों के "सुधारक"
- कुछ "सुपर पुरस्कार" सबसे ज्यादा ... सबसे ज्यादा ... सबसे ज्यादा जिम्मेदार और सक्रिय ग्राहक।
ग्राहक एकाग्रता का बिंदु एक ऑनलाइन ऑर्डरिंग प्रणाली के साथ एक व्यक्तिगत खाता है जहां हम कुछ की पेशकश कर सकते हैं और कुछ महत्वपूर्ण रिपोर्ट कर सकते हैं।
लेखांकन कार्यक्रम ("पीला") - जहां प्रत्येक ग्राहक पहचानकर्ता और उसके संकेतकों के लिए सामान्य जानकारी है।

इस तरह के डेटा के साथ, आप अपने व्यक्तिगत खाते में चलते रह सकते हैं:

बैनर + "इसे खरीदें और इसे प्राप्त करें"
या क्लाइंट मापदंडों के साथ एक तालिका, जहां दिन में एक बार आप एक लेखा कार्यक्रम से डेटा अपलोड कर सकते हैं
चूँकि साइट 1C-Bitrix पर है, तो आप क्लाइंट के पहचानकर्ता के आधार पर कुछ शर्तों को पूरा करने या प्रदर्शित किए गए कुछ आँकड़ों के साथ API के भीतर अपना तर्क बना सकते हैं, तो कुछ छूट लागू करने के लिए जटिल "टोकरी नियम" बना सकते हैं।

हमने यह सब किया और अपने ग्राहकों को सूचित करने के लिए ऐसा कर रहे हैं। लेकिन इस मामले में मैं कुछ और कोशिश करना चाहता था - एक खेल बनाने के लिए - जहां संकेतक अमूर्त मात्रा में देखे जाएंगे।

स्टेज 2. तो, हम गेम बनाते हैं और अब टीके इस तरह से आवाज करेगा

हमारा विषय स्पेयर पार्ट्स है और अधिकांश भाग के लिए - ऑटो पार्ट्स की थोक बिक्री, इसके अनुसार, गेम लॉजिक की निम्न संरचना निर्धारित की गई थी:

स्पॉटलाइट में - ट्रैक जिसके साथ कार को चलना चाहिए
मार्ग कहीं से शुरू होता है और कहीं समाप्त (शुरू और खत्म) होता है, यानी मार्ग में किमी में लंबाई दी गई है।
प्रारंभ एक संकेतक का एक संदर्भ बिंदु है - "पारित तरीका"
फिनिश लाइन एक समापन बिंदु है, जिस पर हम ग्राहक को एक विशेष विशेषाधिकार या बहुत मूल्यवान पुरस्कार प्रदान कर सकते हैं।
ट्रैक पर रुकने वाले बिंदु होने चाहिए (यह एक बाधा हो सकती है, एक निर्णय के लिए रोक)।
निर्णय बिंदु (चेकपॉइंट) - ग्राहक को "बान" देना चाहिए और "बान" की शुरुआत या अस्वीकृति पर लौटना चाहिए और आगे बढ़ना चाहिए।
बाधा - कुछ संकेतक बदलना चाहिए।
कार की आवाजाही के लिए ईंधन का इस्तेमाल किया जाएगा।
ईंधन एक अमूर्तता है, लीटर जिसमें से ग्राहक को बिक्री / कार्य पूरा करने के लिए बिक्री की शर्तों को देखने के लिए प्राप्त होता है।
ईंधन की खपत प्रति 100 कि.मी. एक कार में - यह भी एक अमूर्त है जो आपूर्तिकर्ता के रूप में हमारे दायित्वों के अनुपालन में, ग्राहक की "ईमानदारी" और "जिम्मेदारी" के संकेतकों पर निर्भर करता है।
ईंधन की खपत कुछ प्रकार के उन्नयन में और उचित सीमा के भीतर होनी चाहिए।

"महान और पराक्रमी" की मदद से यह छोटे उपकेंद्रों में विभाजित करने और कार्यान्वयन उपकरण की पसंद की समझ में आने के लिए एक बड़ा काम बन गया। कार आंदोलन के यांत्रिकी के आयोजन के लिए "दो-पहिया" वाहन बनाने के लिए नहीं, एक जावास्क्रिप्ट ढांचे का उपयोग करने के पक्ष में एक विकल्प बनाया गया था।

खेल ढांचे की आवश्यकताएं जो हमने खुद के लिए निर्धारित की हैं, वे इस प्रकार हैं:

2 डी मानचित्र
नक्शा प्रेत
इवेंट मॉडल
"त्वरित शुरुआत"
प्रलेखन

कुल मिलाकर, 3-5 प्रसिद्ध समाधान (अल्पज्ञात पॉइंटज सहित) की समीक्षा और परीक्षण किया गया। उन सभी को माना जाता था, जो गेम बनाने के लिए वास्तव में महान इंजन थे, लेकिन आपको कुछ आसान की जरूरत थी और जादूगरों को चुना गया था।

Enchantjs एक सरल 2 डी गेम बनाने के लिए उपकरणों के आवश्यक सेट के साथ एक सरल इंजन है।

चरण 3. तकनीकी डिजाइन

जब तक हम एंचेंटज के साथ पर्याप्त नहीं हो जाते, तब तक एक छोटे से एप्लिकेशन संरचना की रूपरेखा तैयार करने का समय आ गया है।

- तालिकाओं और डेटा को बचाया जाना (MySQL के बारे में बात करना)

खिलाड़ी के वर्तमान डेटा (खेल के वर्तमान मापदंडों को प्रभावित करने वाला डेटा) की एक सारांश तालिका। आंशिक रूप से इस तालिका को खेल के दौरान संशोधित किया गया है, आंशिक रूप से लेखांकन कार्यक्रम से।
लीटर गैसोलीन में परिवर्तन। ये वो सार हैं जो क्लाइंट अपनी वर्चुअल कार में भर सकता है। यह डेटा केवल लेखांकन कार्यक्रम से आना चाहिए।
माइलेज का इतिहास बदलता है। जहां ग्राहक अपनी कार में मिला, जहां वह गैस से बाहर भाग गया, जहां वह चौकी ले गया।
ईंधन की खपत में बदलाव। उदाहरण के लिए, आज एक ग्राहक 9 लीटर की कार लेता है। 100 किमी, और कल ग्राहक के लिए टिप्पणियां थीं और उनकी कार की खपत 11 लीटर तक बढ़ गई। प्रति 100 कि.मी.
1C-Bitrix में इंफोब्लॉक, जहां मार्केटिंग विशेषज्ञ ग्राहकों के लिए कार्य करेंगे।
पूर्ण ग्राहक असाइनमेंट के साथ एक तालिका।
चौकियों की तालिका। (खेल के नक्शे पर झंडे के साथ स्प्राइट खींचने की आवश्यकता)
उपहारों की एक तालिका जो हम ग्राहक को चेकपॉइंट पर प्रदान कर सकते हैं।
एकत्रित चौकियों की तालिका। (ग्राहक चौकी पहुंचा, गिफ्ट चुना और हमने उसे लिख दिया)
लीटर गैसोलीन की खपत / आगमन का इतिहास। यही है, जब एक ड्राइविंग होती है तो एक व्यय होता है, जब एक कनस्तर को ईंधन भरना - एक ईंधन आगमन होता है। क्लाइंट को सूचित करने के लिए यह डेटा आवश्यक है।

- घटक 1C - बिट्रिक्स

सामान्य घटक टेम्पलेट
खेल के दौरान उपयोगकर्ता अनुरोध संसाधित करना
खेल के मैदान पर होने वाली घटनाएँ
गेम प्रबंधन इंटरफ़ेस में उपयोगकर्ता द्वारा की जाने वाली प्रसंस्करण क्रियाएं

- मॉड्यूल 1 सी - बिट्रिक्स

सभी आवश्यक तालिकाओं के ओआरएम
कुछ सेवा संचालन
एजेंटों

- लेखांकन सॉफ्टवेयर के साथ साझा करने के लिए एपीआई
खेल लेखा कार्यक्रम के बारे में डेटा के लिए प्रसंस्करण अनुरोध।
सॉफ्टवेयर लेखांकन के खिलाड़ियों पर डेटा की व्यवस्था के लिए प्रसंस्करण अनुरोध।

चरण 4. खेल के दृश्य का कार्यान्वयन

कार्यान्वयन में, मैं केवल एक उदाहरण दूंगा कि कौन सी चिंताएं जादू और खेल के साथ दृश्य को दर्शाती हैं।

पहले हमें एक दृश्य बनाने और खेल के लिए एक मानचित्र बनाने की आवश्यकता है।

नक्शा सरणी के एक सरणी से बनाया गया है, जहां प्रत्येक नेस्टेड सरणी मानचित्र सामग्री के मूल स्प्राइट से सेल नंबर की विशेषता है।

मानचित्र के कुछ हिस्सों का उपयोग खेल के दृश्य के निर्माण में किया जाएगा

मानचित्र स्प्राइट स्रोत

enchant();//   var game = new Game(800,700);//     800   700 game.fps = 28; //   game.scale = 1; //  // (, ) game.preload('red_car.gif'); game.preload('airport.gif'); game.preload('flag.gif'); //  game.onload = function() { var scene=new SceneGame();//   game.pushScene(scene); }; game.start();

गेम सीन बनाने और गेम लॉन्च करने के लिए मूल सिंटैक्स मिला।

लब्बोलुआब यह है कि हम HTML पृष्ठों पर एक आयत बनाते हैं, जिस पर हम स्प्राइट्स में हेरफेर करेंगे।

मुझे तुरंत यह कहना होगा कि खेल को लागू करते समय, मुझे एंचेंट इवेंट मॉडल और अवधारणा को छोड़ना पड़ा था कि एफपीएस मूल्य के प्रभाव में दृश्य परिवर्तन के हिस्से के रूप में सभी क्रियाएं होती हैं।

खेल के मुख्य दृश्य को परिभाषित करें, एक नक्शा खींचें, झंडे लगाएं और शुरुआत के लिए मशीन सेट करें।

 /** *     * @type {Scene} */ var SceneGame=Class.create(Scene,{ initialize:function(){ Scene.apply(this); game = Game.instance; var label=new Label('   ');//    var map = new Map(32,32);//  map.gif    1-   var car =new Car();//   var points_list=[]; //      //             for(var point_km in app_user.check_point){ var flag_position=curent_odometr_to_coordinat(point_km);//  ,      x  y -      . var red_flag=new Redflag();//  1-   red_flag.x=flag_position.x;// 1-   x red_flag.y=flag_position.y;// 1-   y red_flag.rotation=0;//     points_list.push(red_flag); delete red_flag; } this.red_flag=red_flag; this.car=car; map.image = game.assets['map.gif'];//    //  ,      map.gif var baseMap = [ [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24], [ 4, 1, 1, 1, 5, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 4, 1, 1, 1, 1, 5, 24, 24, 24, 24], [12, 24, 24, 24, 0, 24, 51, 47, 5, 24, 24, 24, 24, 24, 24, 24, 24, 0, 24, 24, 24, 24, 12, 24, 24, 24, 24], [12, 24, 24, 24, 0, 24, 24, 24, 0, 24, 24, 24, 24, 24, 24, 24, 24, 0, 24, 24, 24, 24, 12, 24, 24, 24, 24], [12, 24, 24, 24, 0, 24, 24, 25, 0, 24, 24, 24, 24, 24, 24, 24, 24, 0, 24, 24, 24, 24, 12, 24, 24, 24, 24], [12, 24, 24, 24, 0, 24, 24, 25, 0, 24, 24, 24, 24, 24, 24, 24, 24, 0, 24, 24, 24, 24, 12, 24, 24, 24, 24], [12, 24, 24, 24, 0, 24, 24, 25, 24, 24, 24, 24, 24, 24, 24, 24, 24, 0, 24, 24, 24, 24, 0, 24, 24, 24, 24], [12, 24, 24, 24, 8, 1, 1, 1, 5, 47, 22, 44, 4, 1, 1, 1, 5, 0, 24, 24, 24, 24, 11, 24, 24, 24, 24], [12, 24, 24, 24, 24, 24, 24, 24, 0, 24, 24, 24, 0, 24, 24, 24, 0, 0, 24, 24, 24, 24, 0, 24, 24, 24, 24], [12, 24, 24, 24, 24, 24, 24, 24, 0, 24, 24, 24, 0, 24, 24, 24, 0, 0, 24, 24, 24, 24, 0, 24, 24, 24, 24], [12, 24, 24, 24, 24, 24, 24, 24, 0, 24, 24, 24, 0, 24, 24, 24, 0, 0, 24, 24, 24, 24, 0, 24, 24, 24, 24], [12, 24, 24, 24, 24, 24, 24, 24, 8, 1, 1, 1, 9, 24, 24, 24, 12, 0, 24, 24, 24, 24, 8, 1, 1, 1, 8], [12, 24, 24, 24, 24, 24, 24, 4, 9, 57, 57, 24, 24, 24, 12, 24, 12, 8, 1, 1, 1, 1, 5, 24, 24, 24, 24], [12, 24, 24, 24, 24, 24, 24, 0, 49, 24, 24, 24, 24, 24, 12, 24, 12, 24, 24, 24, 24, 24, 0, 24, 24, 24, 24], [12, 24, 24, 24, 24, 24, 24, 0, 59, 50, 50, 50, 24, 24, 12, 24, 12, 24, 24, 24, 24, 24, 0, 24, 24, 24, 24], [12, 24, 24, 24, 24, 24, 24, 8, 1, 1, 1, 1, 5, 24, 12, 24, 12, 24, 24, 24, 24, 24, 0, 24, 24, 24, 24], [12, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 8, 1, 9, 24, 12, 51, 51, 51, 51, 24, 0, 24, 24, 24, 24], [11, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 8, 1, 1, 1, 1, 1, 9, 24, 24, 24, 24] ]; } map.loadData(baseMap); this.addChild(map);//    this.addChild(car); for(var index_flag in points_list){//   -  this.addChild(points_list[index_flag]); } });

नक्शा छवि

नतीजतन, हमें एक नक्शे के साथ एक दृश्य मिलता है जिस पर एक सड़क है। स्क्रीनशॉट में, झंडे को इंगित नहीं किया गया है और कार शुरू (निचले बाएं कोने) में स्थापित नहीं है।

जादूगरों में प्रत्येक स्प्राइट ऑब्जेक्ट में कम से कम लगातार समन्वय प्रणाली में स्थिति के बारे में जानकारी होती है, स्प्राइट के रोटेशन के कोण के बारे में।

नक्शा स्केच

यानी एक खींचे गए नक्शे पर कार की गति को पूरा करने के लिए, इसे लिया गया:

ट्रैक के एक मोड़ पर पहुंचने पर अंतरिक्ष में अपने कार्यों का वर्णन करें
स्प्राइट के रोटेशन के कोण के आधार पर कार की गतिविधियों और चालन की दिशा का वर्णन करें।

यही है, अगर हमारे पास 0 का रोटेशन कोण है और चूंकि कार का स्प्राइट नीचे से शुरू होता है, तो हम वाई अक्ष के साथ समन्वय अक्ष के शून्य पर चले जाते हैं। अगला हम ट्रैक नंबर 1 के मोड़ का सामना करते हैं और कार के स्प्राइट को 90 डिग्री तक घुमाना चाहिए। इसके अलावा, यह जानते हुए कि हम 90 डिग्री के कोण पर स्थित हैं, हम एक्स अक्ष के साथ ट्रैक नंबर 2, आदि के मोड़ तक आगे बढ़ते हैं।

इसलिए हमने कार को खींची गई समन्वय प्रणाली के साथ चलना सिखाया।

सड़क के साथ कार की बातचीत को उन मूल्यों तक पहुंचाने के लिए जिनसे हम परिचित हैं - किमी की दूरी में यात्रा करने के लिए, एक अतिरिक्त फ़ंक्शन लिखना आवश्यक था जो किमी की संख्या लेता है। 0 से 3000 तक और सड़क खंड पर बिंदु के निर्देशांक लौटाता है।

कार की आवाजाही के लिए, हमने setInterval का उपयोग किया जो कार के चलते समय x या y मान बढ़ाता है

 //  var start=setInterval(function(){ var position=car.getElementMap(car.x,car.y); position.map_num=map.checkTile(car.x,car.y); var move_result=car.move_car(position); //      var fuel_one_km=fuel_consumption(app_user.fuel_road);//  1 app_storage.fuel -=fuel_one_km; app_storage.fuel=parseFloat((app_storage.fuel).toFixed(2)); if(app_storage.fuel<=0){ //   clearInterval(start); console.log(' !'); //   ,       } var check_point_km=check_car_checkpoint(app_storage.km) //  if(typeof check_point_km.point_km!=='undefined') { console.log('!'); //   ,       } if(position.car_x>780) { clearInterval(start); } },app_conf().game.move_car_fps);

नक्शा, टाइपराइटर, झंडे

आंदोलन के दौरान, खेल के दृश्य पर घटनाएं होती हैं:

हिटिंग झंडे
ईंधन खत्म
फिनिश लाइन तक पहुंचना

इन घटनाओं तक पहुंचने पर, ऐसी घटनाएं बनाई जाती हैं जो 1C-Bitrix घटक की नियंत्रण स्क्रिप्ट में संसाधित होती हैं।

अधिक ... और

खेल प्रणाली को पूरा करने के लिए निम्नलिखित कदम थे:

नियंत्रण बटन के साथ एक इंटरफ़ेस बनाना
खेल के साथ मैदान पर होने वाली घटनाओं पर प्रतिक्रिया
उपयोगकर्ता के कार्यों के आधार पर गेम पैरामीटर में परिवर्तन
पीछे के छोर पर वाहन के मापदंडों की जाँच

परिणाम एलसी में ऐसा खेल है

स्क्रीन एल.के.

और एक छोटा सा वीडियो

ग्राहक की प्रेरणा के लिए भूल गए enchantjs + नए 1C-Bitrix = गेम

चरण 1. विचार से लेकर समझने की आवश्यकता है

स्टेज 2. तो, हम गेम बनाते हैं और अब टीके इस तरह से आवाज करेगा

चरण 3. तकनीकी डिजाइन

चरण 4. खेल के दृश्य का कार्यान्वयन

अधिक ... और

More articles: