Os estoques nas lojas on-line podem ser diferentes, mas como torná-los visualmente interessantes para um cliente é sempre uma questão, tentamos transformar um estoque comum no qual há estatísticas regulares do cliente em um jogo no estilo Dendy.
Aqui, falaremos sobre como as idéias de marketing para motivar os clientes podem ser visualizadas em um pequeno jogo para o navegador.Etapa 1. Da idéia ao entendimento do que é necessário
Em um belo dia (antes do início do verão), a idéia de organizar uma campanha motivadora para a direção de atacado dos clientes amadureceu no departamento de marketing. A partir dos dados de origem, como sempre, tivemos o seguinte:
- Alguma identificação de cliente
- Métricas do cliente
- Qual é o valor total que o cliente comprou por um determinado período de tempo
- Quais marcas foram adquiridas pelo cliente durante esse período?
- Quão “honestamente” e responsavelmente o cliente cumpre suas obrigações conosco e com os fornecedores de produtos
- Quais condições de preço "especiais" o cliente tem com base em seu trabalho conosco
- Algum conjunto de ferramentas de motivação.
- A lista de "presentes" que podemos oferecer ao cliente por sua cooperação e desempenho
- "Melhoradores" de suas ofertas de preços atuais
- Alguns “Super prêmios” para o cliente mais ... o mais ... o mais responsável e ativo.
- O ponto de concentração do cliente é uma conta pessoal com um sistema de pedidos on-line onde podemos oferecer algo e relatar algo importante.
- Programa de contabilidade (“Amarelo”) - onde há informações gerais para cada identificador de cliente e seus indicadores.
Com esse conjunto de dados, você pode se organizar em sua conta pessoal:
- Banner + "Compre e obtenha este"
- Ou uma tabela com parâmetros do cliente, onde uma vez por dia você pode fazer upload de dados de um programa de contabilidade
- Como o site está no 1C-Bitrix, você pode fazer "Regras de cesta" complexas para aplicar alguns descontos, se determinadas condições forem atendidas, dependendo do identificador do cliente ou criar sua própria lógica na API com algumas estatísticas exibidas.
Fizemos tudo isso e estamos fazendo isso para informar nossos clientes. Mas, nesse caso, eu queria tentar outra coisa - criar um jogo - em que os indicadores fossem visualizados em quantidades abstratas.
Etapa 2. Então, criamos o jogo e agora o TK vai soar assim
Nosso tópico são peças de reposição e, em grande parte - vendas por atacado de peças de automóvel, de acordo com isso, foi determinada a seguinte estrutura da lógica do jogo:
- No centro das atenções - a pista ao longo da qual o carro deve se mover
- O percurso começa em algum lugar e termina em algum lugar (início e fim), ou seja, o percurso tem um determinado comprimento em km.
- Start é um ponto de referência de um indicador - “o caminho passado”
- A linha de chegada é o ponto final ao atingir o qual podemos oferecer ao cliente um privilégio especial ou um prêmio muito valioso.
- Deve haver pontos de parada na pista (isso pode ser um obstáculo, uma parada para uma decisão).
- O ponto de decisão (ponto de verificação) - deve dar ao cliente um "bolo" e retornar ao início ou rejeição do "bolo" e seguir em frente.
- Obstáculo - deve mudar alguns indicadores.
- O combustível será usado para dirigir o carro.
- O combustível é uma abstração, litros dos quais o cliente recebe por observar os termos de vendas + para concluir tarefas / missões.
- Consumo de combustível por 100 km. em um carro - essa também é uma abstração que depende dos indicadores de “honestidade” e “responsabilidade” do cliente, em conformidade com suas obrigações para conosco como fornecedores.
- O consumo de combustível deve estar em algum tipo de gradação e dentro de limites razoáveis.
Com a ajuda dos “grandes e poderosos”, acabou sendo uma grande tarefa dividir-se em pequenas subtarefas e chegar a um entendimento da escolha da ferramenta de implementação. Para não criar um veículo "de duas rodas" para organizar a mecânica do movimento do carro, foi feita uma escolha em favor do uso de uma estrutura JavaScript.
Os requisitos para a estrutura do jogo que determinamos por nós mesmos são os seguintes:
- Mapa 2D
- Sprites de mapa
- Modelo de evento
- "Início rápido"
- A documentação
No total, 3-5 soluções conhecidas (incluindo o pouco conhecido PointJS) foram revisadas e testadas. Tudo isso foi considerado, realmente ótimos mecanismos para criar jogos, mas você precisava de algo fácil e o enchantjs foi escolhido.
Enchantjs é um mecanismo simples, com o conjunto de ferramentas necessário para criar um jogo 2D simples.
Etapa 3. Projeto técnico
Depois de termos jogado o suficiente com o Enchantjs, é hora de descrever uma pequena estrutura de aplicativo.
- Tabelas e dados a serem salvos (falando sobre MySQL)- Uma tabela de resumo dos dados atuais do jogador (dados que afetam os parâmetros atuais do jogo). Em parte, esta tabela é modificada durante o jogo, em parte a partir do programa de contabilidade.
- Mudanças nos litros de gasolina. Essas são as abstrações que o cliente pode preencher em seu carro virtual. Esses dados devem vir apenas do programa de contabilidade.
- Histórico de alterações de quilometragem. Onde o cliente chegou em seu carro, onde ficou sem gasolina, onde tomou o posto de controle.
- Alterações no consumo de combustível. Por exemplo, hoje um cliente consome um carro de 9 litros. 100 km, e amanhã houve comentários ao cliente e seu carro aumentou o consumo para 11 litros. por 100 km.
- Infoblock no 1C-Bitrix, onde os especialistas em marketing inserem tarefas para os clientes (faça ... então ... aqui está ..., confirme com uma foto ou link e você obterá doces ou consumo reduzido)
- Uma tabela com atribuições de cliente concluídas.
- Tabela de pontos de verificação. (Necessário para desenhar sprites com bandeiras no mapa do jogo)
- Uma tabela de presentes que podemos fornecer ao cliente no ponto de verificação.
- Tabela de pontos de verificação coletados. (o cliente chegou ao ponto de verificação, escolheu um presente e anotamos)
- História do consumo / chegada de litros de gasolina. Ou seja, ao dirigir, há uma despesa, ao reabastecer um cilindro - há uma chegada de combustível. Esses dados são necessários para informar o cliente.
- Componente 1C - Bitrix- Modelo de componente geral
- Processando solicitações de usuários durante o jogo
- Processando eventos que ocorrem no campo do jogo
- Processando ações executadas pelo usuário na interface de gerenciamento de jogos
- Módulo 1C - Bitrix- ORM de todas as tabelas necessárias
- Algumas operações de serviço
- Agentes
- API para compartilhar com software de contabilidadeProcessando solicitações de dados sobre o programa de contabilidade do jogo.
Processando solicitações para o fornecimento de dados no software de contabilidade de jogadores.
Etapa 4. Implementação da cena do jogo
Na implementação, darei um exemplo apenas do que diz respeito aos encantos e à cena do jogo.
Primeiro, precisamos criar uma cena e formar um mapa para o jogo.
O mapa é construído a partir de uma matriz de matrizes, em que cada matriz aninhada caracteriza o número da célula do sprite original do material do mapa.
Partes do mapa que serão usadas na construção da cena do jogoenchant();
Tem a sintaxe básica para criar uma cena do jogo e iniciar o jogo.
A linha inferior é que desenhamos um retângulo nas páginas HTML nas quais manipularemos sprites.
Devo dizer imediatamente que, ao implementar o jogo, tive que abandonar o modelo de evento de encantamento e o conceito de que todas as ações ocorrem como parte de uma cena, sob a influência do valor de fps.Defina a cena principal do jogo, desenhe um mapa, coloque as bandeiras e defina a máquina para o início.
var SceneGame=Class.create(Scene,{ initialize:function(){ Scene.apply(this); game = Game.instance; var label=new Label(' ');
Como resultado, temos uma cena com um mapa no qual há uma estrada. Na captura de tela, as bandeiras não são indicadas e o carro não está instalado no início (canto inferior esquerdo).
Cada objeto sprite em enchantjs pelo menos constantemente contém informações sobre a posição no sistema de coordenadas, sobre o ângulo de rotação do sprite.
I.e. para realizar o movimento do carro em um mapa desenhado, foram necessários:
- Descreva suas ações no espaço ao atingir uma curva da pista
- Descreva as ações do carro e a direção do movimento, dependendo do ângulo de rotação do sprite.
Ou seja, se tivermos um ângulo de rotação de 0 e, como o sprite do carro começa de baixo para cima, movemos para os zeros do eixo de coordenadas ao longo do eixo Y. Em seguida, encontramos a curva da pista nº 1 e devemos girar o sprite do carro 90 graus. Além disso, sabendo que estamos localizados em um ângulo de 90 graus, nos movemos ao longo do eixo X até a curva da pista nº 2, etc.
Por isso, ensinamos o carro a percorrer o sistema de coordenadas desenhado.
Para levar a interação do carro com a estrada para os valores que estamos familiarizados - para a distância em km percorrida, foi necessário escrever uma função adicional que leva o número de km. de 0 a 3000 e retorna as coordenadas do ponto na seção da estrada.
Para o movimento do carro, usamos
setInterval, que aumenta os valores x ou y enquanto o carro está em movimento
Mapa, máquina de escrever, bandeiras Durante o movimento, os eventos ocorrem na cena do jogo:
- Atingindo Bandeiras
- Fim do combustível
- Atingindo a linha de chegada
Ao atingir esses eventos, são criados eventos que são processados no script de controle do componente 1C-Bitrix.
Mais ... mais
As etapas a seguir para concluir o sistema de jogo foram:
- Criando uma interface com botões de controle
- Reação a eventos em campo com o jogo
- Alterações nos parâmetros do jogo, dependendo das ações do usuário
- Verificando os parâmetros do veículo no back-end
O resultado é um jogo no LC