Les stocks dans les magasins en ligne peuvent être différents, mais comment les rendre visuellement intéressants pour un client est toujours une question, nous avons essayé de transformer un stock commun dans lequel il existe des statistiques de clients régulières en un jeu dans des styles Dendy.
Ici, nous parlerons de la façon dont les idées marketing pour motiver les clients peuvent être visualisées dans un petit jeu pour le navigateur.Étape 1. De l'idée à la compréhension de ce qui est nécessaire
Un beau jour (avant le début de l'été), l'idée d'organiser une campagne de motivation pour la direction grossiste des clients a mûri au sein du service marketing. À partir des données source, comme d'habitude, nous avons eu les éléments suivants:
- Un identifiant client
- Mesures client
- Quel est le montant total que le client a acheté pendant une certaine période de temps
- Quelles marques ont été acquises par le client au cours de cette période?
- Comment «honnêtement» et de manière responsable le client s'acquitte de ses obligations envers nous en tant que fournisseurs de produits
- Quelles conditions de prix «spéciales» le client a-t-il basées sur son travail avec nous
- Un ensemble d'outils de motivation.
- La liste des «cadeaux» que nous pouvons offrir au client pour sa coopération et sa performance
- «Améliorateurs» de ses offres de prix actuelles
- Un «super prix» au client le plus ... le plus ... le plus responsable et le plus actif.
- Le point de concentration des clients est un compte personnel avec un système de commande en ligne où nous pouvons offrir quelque chose et signaler quelque chose d'important.
- Programme de comptabilité («jaune») - où il existe des informations générales pour chaque identifiant client et ses indicateurs.
Avec un tel ensemble de données, vous pouvez organiser en déplacement dans votre compte personnel:
- Bannière + "Achetez ceci et obtenez ceci"
- Ou un tableau avec les paramètres du client, où une fois par jour, vous pouvez télécharger des données à partir d'un programme de comptabilité
- Étant donné que le site est sur 1C-Bitrix, vous pouvez créer des «règles de panier» complexes pour appliquer des remises si certaines conditions sont remplies en fonction de l'identifiant du client ou créer votre propre logique dans l'API avec des statistiques affichées.
Nous avons fait tout cela et le faisons pour informer nos clients. Mais dans ce cas, je voulais essayer autre chose - créer un jeu - où les indicateurs seront visualisés en quantités abstraites.
Étape 2. Donc, nous faisons le jeu et maintenant TK sonnera comme ça
Notre sujet est les pièces de rechange et pour la plupart - les ventes en gros de pièces automobiles, selon cela, la structure suivante de la logique de jeu a été déterminée:
- Sous les projecteurs - la piste le long de laquelle la voiture doit se déplacer
- L'itinéraire commence quelque part et se termine quelque part (début et fin), c'est-à-dire que l'itinéraire a une longueur donnée en km.
- Le départ est le point de référence d'un indicateur - «la voie passée»
- La ligne d'arrivée est le point final auquel nous pouvons accorder un privilège spécial ou un prix très précieux au client.
- Il devrait y avoir des points d'arrêt sur la piste (cela peut être un obstacle, un arrêt pour une décision).
- Le point de décision (point de contrôle) - devrait donner au client un «chignon» et revenir au début ou au rejet du «chignon» et continuer.
- Obstacle - devrait changer certains indicateurs.
- Pour le mouvement de la voiture sera utilisé du carburant.
- Le carburant est une abstraction, dont le client reçoit des litres pour respecter les conditions de vente + pour accomplir des tâches / quêtes.
- Consommation de carburant aux 100 km. dans une voiture - c'est aussi une abstraction qui dépend des indicateurs «d'honnêteté» et de «responsabilité» du client, conformément à ses obligations envers nous en tant que fournisseurs.
- La consommation de carburant devrait être dans une sorte de gradation et dans des limites raisonnables.
Avec l'aide des «grands et puissants», il s'est avéré être une grande tâche de se diviser en petites sous-tâches et de comprendre le choix de l'outil de mise en œuvre. Afin de ne pas créer un véhicule «à deux roues» pour organiser la mécanique du mouvement automobile, un choix a été fait en faveur de l'utilisation d'un framework JavaScript.
Les exigences pour le cadre de jeu que nous avons déterminé pour nous-mêmes sont les suivantes:
- Carte 2D
- Sprites de carte
- Modèle d'événement
- "Démarrage rapide"
- La documentation
Au total, 3 à 5 solutions bien connues (y compris le PointJS peu connu) ont été examinées et testées. Tout cela a été considéré, de très bons moteurs pour créer des jeux, mais vous aviez besoin de quelque chose de facile et d'enchantjs a été choisi.
Enchantjs est un moteur simple avec l'ensemble d'outils nécessaire pour créer un jeu 2D simple.
Étape 3. Conception technique
Après avoir suffisamment joué avec Enchantjs, il est temps de décrire une petite structure d'application.
- Tables et données à sauvegarder (parler de MySQL)- Un tableau récapitulatif des données actuelles du joueur (données qui affectent les paramètres actuels du jeu). En partie ce tableau est modifié en cours de partie, en partie depuis le programme de comptabilité.
- Changements en litres d'essence. Ce sont les abstractions que le client peut remplir dans sa voiture virtuelle. Ces données ne devraient provenir que du programme comptable.
- Historique des changements de kilométrage. Où le client est arrivé dans sa voiture, où il a manqué d'essence, où il a pris le poste de contrôle.
- La consommation de carburant change. Par exemple, aujourd'hui, un client consomme une voiture de 9 litres. 100 km, et demain il y avait des commentaires au client et sa voiture a augmenté la consommation à 11 litres. par 100 km.
- Infoblock dans 1C-Bitrix, où les spécialistes du marketing entreront des tâches pour les clients (faites-le ... puis ... le voici ..., confirmez avec une photo ou un lien et vous obtiendrez des bonbons ou une consommation réduite)
- Un tableau avec les affectations clients terminées.
- Tableau des points de contrôle (requis pour dessiner des sprites avec des drapeaux sur la carte du jeu)
- Une table de cadeaux que nous pouvons offrir au client au checkpoint.
- Tableau des points de contrôle collectés. (le client a atteint le point de contrôle, a choisi un cadeau et nous l'avons noté)
- Historique de la consommation / arrivée de litres d'essence. Autrement dit, lors de la conduite, il y a des frais, lors du ravitaillement d'une cartouche - il y a une arrivée de carburant. Ces données sont nécessaires pour informer le client.
- Composant 1C - Bitrix- Modèle de composant général
- Traitement des demandes des utilisateurs pendant le jeu
- Traitement des événements survenant sur le terrain de jeu
- Traitement des actions effectuées par l'utilisateur dans l'interface de gestion du jeu
- Module 1C - Bitrix- ORM de toutes les tables requises
- Quelques opérations de service
- Agents
- API pour partager avec un logiciel de comptabilitéTraitement des demandes de données sur le programme de comptabilité du jeu.
Traitement des demandes de mise à disposition de données sur les logiciels de comptabilité des joueurs.
Étape 4. Mise en œuvre de la scène du jeu
Dans l'implémentation, je ne donnerai qu'un exemple de ce qui concerne enchantjs et la scène du jeu.
Nous devons d'abord créer une scène et former une carte pour le jeu.
La carte est construite à partir d'un tableau de tableaux, où chaque tableau imbriqué caractérise le numéro de cellule du sprite d'origine du matériau de la carte.
Parties de la carte qui seront utilisées pour construire la scène du jeuenchant();
Vous avez la syntaxe de base pour créer une scène de jeu et lancer le jeu.
L'essentiel est que nous dessinons un rectangle sur les pages HTML sur lesquelles nous allons manipuler les sprites.
Je dois dire tout de suite que lors de la mise en œuvre du jeu, j'ai dû abandonner le modèle d'événement enchant et le concept selon lequel toutes les actions se produisent dans le cadre d'un changement de scène sous l'influence de la valeur fps.Définissez la scène principale du jeu, dessinez une carte, placez les drapeaux et mettez la machine en marche.
var SceneGame=Class.create(Scene,{ initialize:function(){ Scene.apply(this); game = Game.instance; var label=new Label(' ');
En conséquence, nous obtenons une scène avec une carte sur laquelle il y a une route. Dans la capture d'écran, les drapeaux ne sont pas indiqués et la voiture n'est pas installée au départ (coin inférieur gauche).
Chaque objet image-objet dans enchantjs contient au moins constamment des informations sur la position dans le système de coordonnées, sur l'angle de rotation de l'image-objet.
C'est-à-dire pour effectuer le déplacement de la voiture sur une carte dessinée, il a fallu:
- Décrire ses actions dans l'espace en atteignant un virage de la piste
- Décrivez les actions de la voiture et la direction du mouvement en fonction de l'angle de rotation du sprite.
Autrement dit, si nous avons un angle de rotation de 0 et que le sprite de notre voiture commence de bas en haut, nous nous déplaçons vers les zéros de l'axe des coordonnées le long de l'axe Y. Ensuite, nous rencontrons le virage de la piste n ° 1 et devons faire tourner le sprite de la voiture de 90 degrés. De plus, sachant que nous sommes situés à un angle de 90 degrés, nous nous déplaçons le long de l'axe X jusqu'au virage de la piste n ° 2, etc.
Nous avons donc appris à la voiture à se déplacer le long du système de coordonnées tracé.
Afin d'amener l'interaction de la voiture avec la route aux valeurs que nous connaissons - à la distance en km parcourue, il a été nécessaire d'écrire une fonction supplémentaire qui prend le nombre de km. de 0 à 3000 et renvoie les coordonnées du point sur le tronçon de route.
Pour le mouvement de la voiture, nous avons utilisé
setInterval qui augmente les valeurs x ou y pendant que la voiture se déplace
Carte, machine à écrire, drapeaux Pendant le mouvement, des événements se produisent sur la scène du jeu:
- Frapper des drapeaux
- Fin de carburant
- Atteindre la ligne d'arrivée
Une fois ces événements atteints, des événements sont créés qui sont traités dans le script de contrôle du composant 1C-Bitrix.
Plus ... plus
Les étapes suivantes pour terminer le système de jeu étaient les suivantes:
- Création d'une interface avec des boutons de commande
- Réaction aux événements sur le terrain avec le jeu
- Modifications des paramètres de jeu en fonction des actions de l'utilisateur
- Vérification des paramètres du véhicule à l'arrière
Le résultat est un tel jeu en LC