Aktien in Online-Shops können unterschiedlich sein, aber wie man sie für einen Kunden visuell interessant macht, ist immer eine Frage. Wir haben versucht, eine Stammaktie, in der es regelmäßige Kundenstatistiken gibt, in ein Spiel im Dendy-Stil umzuwandeln.
Hier werden wir darüber sprechen, wie Marketingideen zur Kundenmotivation in einem kleinen Spiel für den Browser visualisiert werden können.Stufe 1. Von der Idee zum Verständnis dessen, was benötigt wird
Eines schönen Tages (vor Beginn des Sommers) reifte die Idee, eine motivierende Kampagne für die Großhandelsrichtung der Kunden zu organisieren, in der Marketingabteilung. Aus den Quelldaten hatten wir wie üblich Folgendes:
- Einige Kunden-ID
- Kundenmetriken
- Wie hoch ist der Gesamtbetrag, den der Kunde für einen bestimmten Zeitraum gekauft hat?
- Welche Marken wurden in dieser Zeit vom Kunden erworben?
- Wie „ehrlich“ und verantwortungsbewusst der Kunde seine Pflichten uns gegenüber gegenüber Lieferanten von Produkten erfüllt
- Welche „besonderen“ Preisbedingungen hat der Kunde aufgrund seiner Arbeit bei uns?
- Einige Motivationswerkzeuge.
- Die Liste der „Geschenke“, die wir dem Kunden für seine Zusammenarbeit und Leistung anbieten können
- "Verbesserer" seiner aktuellen Preisangebote
- Ein „Superpreis“ für die meisten ... die meisten ... die verantwortungsvollsten und aktivsten Kunden.
- Der Punkt der Kundenkonzentration ist ein persönliches Konto mit einem Online-Bestellsystem, in dem wir etwas anbieten und etwas Wichtiges melden können.
- Buchhaltungsprogramm („Gelb“) - Hier finden Sie allgemeine Informationen zu jeder Kundenkennung und ihren Indikatoren.
Mit einem solchen Datensatz können Sie unterwegs in Ihrem persönlichen Konto Folgendes organisieren:
- Banner + "Kaufen Sie dieses und erhalten Sie dieses"
- Oder eine Tabelle mit Client-Parametern, in der Sie einmal täglich Daten aus einem Buchhaltungsprogramm hochladen können
- Da sich die Site auf 1C-Bitrix befindet, können Sie komplexe „Warenkorbregeln“ festlegen, um einige Rabatte anzuwenden, wenn bestimmte Bedingungen abhängig von der Kennung des Kunden erfüllt sind, oder Ihre eigene Logik innerhalb der API erstellen, wobei einige Statistiken angezeigt werden.
Wir haben das alles getan und tun es, um unsere Kunden zu informieren. Aber in diesem Fall wollte ich etwas anderes ausprobieren - um ein Spiel zu erstellen - bei dem Indikatoren in abstrakten Mengen visualisiert werden.
Stufe 2. Also machen wir das Spiel und jetzt wird TK so klingen
Unser Thema ist Ersatzteile und zum größten Teil - Großhandel mit Autoteilen. Demnach wurde folgende Struktur der Spielelogik festgelegt:
- Im Rampenlicht - die Strecke, auf der sich das Auto bewegen soll
- Die Route beginnt irgendwo und endet irgendwo (Start und Ziel), d. H. Die Route hat eine bestimmte Länge in km.
- Start ist ein Bezugspunkt eines Indikators - "der übergebene Weg"
- Die Ziellinie ist der Endpunkt bei Erreichen, an dem wir dem Kunden ein besonderes Privileg oder einen sehr wertvollen Preis verleihen können.
- Es sollten Haltepunkte auf der Strecke vorhanden sein (dies kann ein Hindernis sein, ein Stopp für eine Entscheidung).
- Der Entscheidungspunkt (Checkpoint) - sollte dem Kunden ein „Brötchen“ geben und zum Start oder zur Ablehnung des „Brötchens“ zurückkehren und weitermachen.
- Hindernis - sollte einige Indikatoren ändern.
- Zum Fahren des Autos wird Kraftstoff verwendet.
- Kraftstoff ist eine Abstraktion, deren Liter der Kunde für die Einhaltung der Verkaufsbedingungen + für die Erledigung von Aufgaben / Quests erhält.
- Kraftstoffverbrauch pro 100 km. in einem Auto - dies ist auch eine Abstraktion, die von den Indikatoren „Ehrlichkeit“ und „Verantwortung“ des Kunden in Übereinstimmung mit seinen Verpflichtungen uns gegenüber als Lieferanten abhängt.
- Der Kraftstoffverbrauch sollte in einer gewissen Abstufung und in angemessenen Grenzen liegen.
Mit Hilfe der „Großen und Mächtigen“ stellte sich heraus, dass es eine große Aufgabe war, sich in kleine Teilaufgaben aufzuteilen und die Wahl des Implementierungswerkzeugs zu verstehen. Um kein „zweirädriges“ Fahrzeug zur Organisation der Mechanik der Fahrzeugbewegung zu schaffen, wurde die Verwendung eines JavaScript-Frameworks gewählt.
Die Anforderungen an das Spiel-Framework, die wir für uns selbst festgelegt haben, lauten wie folgt:
- 2D-Karte
- Map Sprites
- Ereignismodell
- "Schnellstart"
- Die Dokumentation
Insgesamt wurden 3-5 bekannte Lösungen (einschließlich des wenig bekannten PointJS) überprüft und getestet. Alles, was in Betracht gezogen wurde, waren wirklich großartige Engines zum Erstellen von Spielen, aber Sie brauchten etwas Leichtes und es wurden Zaubersprüche ausgewählt.
Enchantjs ist eine einfache Engine mit den notwendigen Werkzeugen zum Erstellen eines einfachen 2D-Spiels.
Stufe 3. Technisches Design
Nachdem wir genug mit Enchantjs gespielt haben, ist es Zeit, eine kleine Anwendungsstruktur zu skizzieren.
- Zu speichernde Tabellen und Daten (über MySQL)- Eine Übersichtstabelle der aktuellen Daten des Spielers (Daten, die die aktuellen Parameter des Spiels beeinflussen). Teilweise wird diese Tabelle während des Spiels geändert, teilweise aus dem Buchhaltungsprogramm.
- Änderungen in Litern Benzin. Dies sind die Abstraktionen, die der Kunde in sein virtuelles Auto eintragen kann. Diese Daten sollten nur aus dem Buchhaltungsprogramm stammen.
- Verlauf der Kilometerstandsänderungen. Wo der Kunde in seinem Auto ankam, wo ihm das Benzin ausging, wo er den Kontrollpunkt nahm.
- Kraftstoffverbrauch ändert sich. Zum Beispiel verbraucht ein Kunde heute ein Auto von 9 Litern. 100 km, und morgen gab es Kommentare an den Kunden und sein Auto erhöhte den Verbrauch auf 11 Liter. pro 100 km.
- Infoblock in 1C-Bitrix, wo Marketing-Spezialisten Aufgaben für Kunden eingeben. (Tun Sie es ... dann ... hier ist es ..., bestätigen Sie mit einem Foto oder Link und Sie erhalten Süßigkeiten oder reduzierten Verbrauch)
- Eine Tabelle mit abgeschlossenen Kundenzuordnungen.
- Tabelle der Kontrollpunkte (Erforderlich, um Sprites mit Flaggen auf der Spielkarte zu zeichnen)
- Eine Tabelle mit Geschenken, die wir dem Kunden am Checkpoint zur Verfügung stellen können.
- Tabelle der gesammelten Kontrollpunkte. (Der Kunde erreichte den Checkpoint, wählte ein Geschenk und wir schrieben es auf.)
- Geschichte des Verbrauchs / der Ankunft von Litern Benzin. Das heißt, wenn man fährt, gibt es Kosten, wenn man einen Kanister betankt - es kommt Kraftstoff an. Diese Daten werden benötigt, um den Kunden zu informieren.
- Komponente 1C - Bitrix- Allgemeine Komponentenvorlage
- Benutzeranfragen während des Spiels verarbeiten
- Verarbeiten von Ereignissen, die auf dem Spielfeld auftreten
- Verarbeitungsaktionen, die vom Benutzer in der Spielverwaltungsoberfläche ausgeführt werden
- Modul 1C - Bitrix- ORM aller erforderlichen Tabellen
- Einige Servicevorgänge
- Agenten
- API für die Freigabe mit BuchhaltungssoftwareVerarbeitung von Datenanfragen zum Spielabrechnungsprogramm.
Verarbeitung von Anfragen zur Bereitstellung von Daten in der Buchhaltungssoftware des Spielers.
Stufe 4. Implementierung der Spielszene
In der Implementierung werde ich nur ein Beispiel geben, was Verzauberungen und die Szene mit dem Spiel betrifft.
Zuerst müssen wir eine Szene erstellen und eine Karte für das Spiel erstellen.
Die Karte besteht aus einem Array von Arrays, wobei jedes verschachtelte Array die Zellennummer aus dem ursprünglichen Sprite des Kartenmaterials kennzeichnet.
Teile der Karte, die zum Erstellen der Spielszene verwendet werdenenchant();
Erhielt die grundlegende Syntax zum Erstellen einer Spielszene und zum Starten des Spiels.
Die Quintessenz ist, dass wir auf HTML-Seiten ein Rechteck zeichnen, auf dem wir Sprites bearbeiten.
Ich muss sofort sagen, dass ich bei der Implementierung des Spiels das verzauberte Ereignismodell und das Konzept aufgeben musste, dass alle Aktionen als Teil eines Szenenwechsels unter dem Einfluss des fps-Werts stattfinden.Definieren Sie die Hauptszene des Spiels, zeichnen Sie eine Karte, platzieren Sie die Flaggen und stellen Sie die Maschine auf den Start.
var SceneGame=Class.create(Scene,{ initialize:function(){ Scene.apply(this); game = Game.instance; var label=new Label(' ');
Als Ergebnis erhalten wir eine Szene mit einer Karte, auf der sich eine Straße befindet. Im Screenshot werden die Flaggen nicht angezeigt und das Auto ist beim Start nicht installiert (untere linke Ecke).
Jedes Sprite-Objekt in Enchantjs enthält zumindest ständig Informationen über die Position im Koordinatensystem, über den Drehwinkel des Sprites.
Das heißt, Um die Bewegung des Autos auf einer gezeichneten Karte auszuführen, dauerte es:
- Beschreiben Sie die Aktionen im Weltraum, wenn Sie eine Kurve der Strecke erreichen
- Beschreiben Sie die Aktionen des Fahrzeugs und die Bewegungsrichtung in Abhängigkeit vom Drehwinkel des Sprites.
Das heißt, wenn wir einen Drehwinkel von 0 haben und das Sprite unseres Autos von unten nach oben beginnt, bewegen wir uns entlang der Y-Achse zu den Nullen der Koordinatenachse. Als nächstes stoßen wir auf die Kurve der Spur Nr. 1 und müssen das Sprite des Autos um 90 Grad drehen. Da wir wissen, dass wir uns in einem Winkel von 90 Grad befinden, bewegen wir uns entlang der X-Achse bis zur Biegung von Spur Nr. 2 usw.
Also haben wir dem Auto beigebracht, sich entlang des gezeichneten Koordinatensystems zu bewegen.
Um die Interaktion des Autos mit der Straße auf die uns bekannten Werte zu bringen - auf die Entfernung in zurückgelegten Kilometern - musste eine zusätzliche Funktion geschrieben werden, die die Anzahl der Kilometer nimmt. von 0 bis 3000 und gibt die Koordinaten des Punktes auf dem Straßenabschnitt zurück.
Für die Bewegung des Autos haben wir
setInterval verwendet, das die x- oder y-Werte erhöht, während sich das Auto bewegt
Karte, Schreibmaschine, Flaggen Während der Bewegung treten Ereignisse in der Spielszene auf:
- Flaggen schlagen
- Kraftstoffende
- Die Ziellinie erreichen
Bei Erreichen dieser Ereignisse werden Ereignisse erstellt, die im Steuerungsskript der 1C-Bitrix-Komponente verarbeitet werden.
Mehr ... mehr
Die folgenden Schritte zur Vervollständigung des Spielsystems waren:
- Erstellen einer Schnittstelle mit Steuertasten
- Reaktion auf Ereignisse auf dem Spielfeld mit dem Spiel
- Änderungen der Spielparameter in Abhängigkeit von Benutzeraktionen
- Fahrzeugparameter am Backend prüfen
Das Ergebnis ist ein solches Spiel in LC
Und ein kleines Video