Las existencias en las tiendas en línea pueden ser diferentes, pero la forma de hacerlas visualmente interesantes para un cliente siempre es una pregunta. Intentamos convertir un stock común en el que hay estadísticas regulares de los clientes en un juego en los estilos de Dendy.
Aquí hablaremos sobre cómo las ideas de marketing para motivar a los clientes se pueden visualizar en un pequeño juego para el navegador.Etapa 1. De la idea a la comprensión de lo que se necesita.
Un buen día (antes del comienzo del verano), la idea de organizar una campaña motivadora para la dirección mayorista de clientes maduró en el departamento de marketing. De los datos de origen, como de costumbre, obtuvimos lo siguiente:
- Alguna identificación del cliente
- Métricas del cliente
- ¿Cuál es la cantidad total que el cliente compró por un cierto período de tiempo?
- ¿Qué marcas fueron adquiridas por el cliente durante este período de tiempo?
- Cuán "honesta" y responsablemente el cliente cumple con sus deberes con nosotros como proveedores de productos
- ¿Qué condiciones de precio "especiales" tiene el cliente en función de su trabajo con nosotros?
- Un conjunto de herramientas de motivación.
- La lista de "regalos" que podemos ofrecer al cliente por su cooperación y desempeño
- "Mejoradores" de sus ofertas de precios actuales
- Algún "Super premio" para el cliente más ... más ... el más responsable y activo.
- El punto de concentración del cliente es una cuenta personal con un sistema de pedidos en línea donde podemos ofrecer algo e informar algo importante.
- Programa de contabilidad ("Amarillo"): donde hay información general para cada identificador de cliente y sus indicadores.
Con este conjunto de datos, puede organizar sobre la marcha en su cuenta personal:
- Banner + "Compre esto y obtenga esto"
- O una tabla con los parámetros del cliente, donde una vez al día puede cargar datos desde un programa de contabilidad
- Dado que el sitio está en 1C-Bitrix, puede hacer complejas "Reglas de la cesta" para aplicar algunos descuentos si se cumplen ciertas condiciones dependiendo del identificador del cliente o hacer su propia lógica dentro de la API con algunas estadísticas mostradas.
Hicimos todo esto y lo estamos haciendo para informar a nuestros clientes. Pero en este caso quería probar otra cosa, crear un juego, donde los indicadores se visualicen en cantidades abstractas.
Etapa 2. Entonces, hacemos el juego y ahora TK sonará así
Nuestro tema son las piezas de repuesto y, en su mayor parte, las ventas al por mayor de piezas de automóviles, de acuerdo con esto, se determinó la siguiente estructura de la lógica del juego:
- En el centro de atención: la pista a lo largo de la cual debe moverse el automóvil
- La ruta comienza en algún lugar y termina en algún lugar (inicio y finalización), es decir, la ruta tiene una longitud dada en km.
- El inicio es un punto de referencia de un indicador: "el camino pasado"
- La línea de meta es el punto final al llegar al cual podemos brindarle al cliente un privilegio especial o un premio muy valioso.
- Debe haber puntos de parada en la pista (esto puede ser un obstáculo, una parada para una decisión).
- El punto de decisión (punto de control): debe darle al cliente un "moño" y volver al inicio o rechazo del "moño" y seguir adelante.
- Obstáculo: debería cambiar algunos indicadores.
- Para el movimiento del automóvil se utilizará combustible.
- El combustible es una abstracción, litros de los cuales recibe el cliente por observar los términos de ventas + por completar tareas / misiones.
- Consumo de combustible por cada 100 km. en un automóvil: esto también es una abstracción que depende de los indicadores de "honestidad" y "responsabilidad" del cliente, en cumplimiento de sus obligaciones con nosotros como proveedores.
- El consumo de combustible debe estar en algún tipo de gradación y dentro de límites razonables.
Con la ayuda de los "grandes y poderosos", resultó ser una gran tarea dividir en pequeñas subtareas y comprender la elección de la herramienta de implementación. Con el fin de no crear un vehículo de "dos ruedas" para organizar la mecánica del movimiento del automóvil, se hizo una elección a favor del uso de un marco JavaScript.
Los requisitos para el marco del juego que determinamos para nosotros mismos son los siguientes:
- Mapa 2D
- Mapa de sprites
- Modelo de evento
- "Inicio rápido"
- La documentación
En total, se revisaron y probaron 3-5 soluciones bien conocidas (incluido el poco conocido PointJS). Todo lo que se consideró, realmente grandes motores para crear juegos, pero necesitabas algo fácil y se eligió enchantjs.
Enchantjs es un motor simple con el conjunto de herramientas necesarias para crear un juego 2D simple.
Etapa 3. Diseño técnico.
Después de haber jugado lo suficiente con Enchantjs, es hora de delinear una pequeña estructura de aplicación.
- Tablas y datos para guardar (hablando de MySQL)- Una tabla resumen de los datos actuales del jugador (datos que afectan los parámetros actuales del juego). En parte, esta tabla se modifica durante el juego, en parte desde el programa de contabilidad.
- Cambios en litros de gasolina. Estas son las abstracciones que el cliente puede completar en su automóvil virtual. Estos datos solo deben provenir del programa de contabilidad.
- Historial de cambios de kilometraje. Dónde llegó el cliente en su automóvil, donde se quedó sin gasolina, donde tomó el puesto de control.
- El consumo de combustible cambia. Por ejemplo, hoy un cliente consume un automóvil de 9 litros. 100 km, y mañana hubo comentarios al cliente y su automóvil aumentó el consumo a 11 litros. por 100 km.
- Bloque de información en 1C-Bitrix, donde los especialistas en marketing ingresarán tareas para los clientes. (Hágalo ... luego ... aquí está ..., confirme con una foto o un enlace y obtendrá dulces o un consumo reducido)
- Una tabla con asignaciones de clientes completadas.
- Tabla de puntos de control. (Se requiere para dibujar sprites con banderas en el mapa del juego)
- Una tabla de regalos que podemos proporcionar al cliente en el punto de control.
- Tabla de puntos de control recogidos. (el cliente llegó al punto de control, eligió un regalo y lo anotamos)
- Historia del consumo / llegada de litros de gasolina. Es decir, cuando se conduce hay un gasto, cuando se reabastece de combustible un recipiente, hay una llegada de combustible. Estos datos son necesarios para informar al cliente.
- Componente 1C - Bitrix- Plantilla de componentes generales
- Procesando solicitudes de usuario durante el juego
- Procesando eventos que ocurren en el campo de juego
- Procesamiento de acciones realizadas por el usuario en la interfaz de gestión del juego.
- Módulo 1C - Bitrix- ORM de todas las tablas requeridas
- Algunas operaciones de servicio
- Agentes
- API para compartir con software de contabilidadProcesamiento de solicitudes de datos sobre el programa de contabilidad del juego.
Procesamiento de solicitudes para el suministro de datos en el software de contabilidad de jugadores.
Etapa 4. Implementación de la escena del juego.
En la implementación, daré un ejemplo solo de lo que concierne a enchantjs y la escena con el juego.
Primero necesitamos crear una escena y formar un mapa para el juego.
El mapa se construye a partir de una matriz de matrices, donde cada matriz anidada caracteriza el número de celda del sprite original del material del mapa.
Partes del mapa que se utilizarán para construir la escena del juego.enchant();
Obtuve la sintaxis básica para crear una escena de juego y lanzar el juego.
La conclusión es que dibujamos un rectángulo en las páginas HTML en el que manipularemos sprites.
Debo decir de inmediato que al implementar el juego, tuve que abandonar el modelo de evento de encantamiento y el concepto de que todas las acciones ocurren como parte de un cambio de escena bajo la influencia del valor fps.Defina la escena principal del juego, dibuje un mapa, coloque las banderas y configure la máquina para el inicio.
var SceneGame=Class.create(Scene,{ initialize:function(){ Scene.apply(this); game = Game.instance; var label=new Label(' ');
Como resultado, obtenemos una escena con un mapa en el que hay un camino. En la captura de pantalla, las banderas no están indicadas y el automóvil no está instalado al inicio (esquina inferior izquierda).
Cada objeto de sprite en enchantjs al menos constantemente contiene información sobre la posición en el sistema de coordenadas, sobre el ángulo de rotación del sprite.
Es decir Para llevar a cabo el movimiento del automóvil en un mapa dibujado, tomó:
- Describa sus acciones en el espacio al llegar a una curva de la pista.
- Describa las acciones del automóvil y la dirección del movimiento según el ángulo de rotación del sprite.
Es decir, si tenemos un ángulo de rotación de 0 y dado que el sprite de nuestro automóvil comienza de abajo hacia arriba, entonces nos movemos a los ceros del eje de coordenadas a lo largo del eje Y. Luego nos encontramos con la curva de la pista No. 1 y debemos rotar el sprite del automóvil 90 grados. Además, sabiendo que estamos ubicados en un ángulo de 90 grados, nos movemos a lo largo del eje X hasta la curva de la pista No. 2, etc.
Entonces le enseñamos al auto a moverse a lo largo del sistema de coordenadas dibujado.
Para llevar la interacción del automóvil con la carretera a los valores con los que estamos familiarizados: a la distancia en km recorrida, fue necesario escribir una función adicional que tome el número de km. de 0 a 3000 y devuelve las coordenadas del punto en la sección del camino.
Para el movimiento del automóvil, utilizamos
setInterval que aumenta los valores x o y mientras el automóvil se mueve
Mapa, máquina de escribir, banderas Durante el movimiento, ocurren eventos en la escena del juego:
- Golpear banderas
- Fin de combustible
- Llegando a la meta
Al llegar a estos eventos, se crean eventos que se procesan en el script de control del componente 1C-Bitrix.
Más ... más
Los siguientes pasos para completar el sistema de juego fueron:
- Crear una interfaz con botones de control
- Reacción a los eventos en el campo con el juego.
- Cambios en los parámetros del juego según las acciones del usuario.
- Comprobación de los parámetros del vehículo en la parte trasera
El resultado es un juego así en LC