Solution Head Banner

Match The Ink

9 Sep · 3 min read

Challenge: Build a web-based game and sync it with client's servers.

Solution: Web-based match 3 game built for Maybelline company to attract new customers and promote a new product.

User Group: Brand customers

Introduction

We had to create the web Match 3 game for MNY company based on the requirements.

The main target players:

  • Women aged 18- 35;
  • Gen Z and millennial women who are makeup users and have high digital involvement plus use gaming as a form of entertainment.

The main goal for players is to complete each level by moving on Manhattan's map to desired the gif code/coupons. It means that each player can get some discount for MNY goods at the end of the game. These mechanics alternate along with all 30 levels of the game.

Match 3 mechanics was implemented in the game in three variants:

  • “fill the bar” (match tiles to get target number of points and fill the bar);
  • “release background” (match tiles to release an image on the background);
  • “drop the product” (match the tiles under a static blocks that represent the customer’s product, to drop them down from the game field).

Technical side

A web game that can be easily included in an existing customer’s website regardless of its framework or CMS. Such universality was reached using HTML, CSS, and JavaScript for UI development (without any specific client-side frameworks or libraries) and PixiJS library for canvas game rendering.
Visual effects in the game were made with lightweight Spine animations, animated sprite sequences, or programmatically drawn on the canvas.

A user’s nickname and progress are stored in the browser local storage and in a Firebase (Cloud Firestore).
Also, different analytic metrics collecting, including custom events tracking, is set up with Google analytics.

Different languages support added to the game - based on localization files, provided in the form of JavaScript objects (separate for every language) with “key-value” pairs, where properties names are the localized phrases keys and values of these properties - the result of a phrase translation.

Features that are synced with the back-end side: 

  • users authorization, storing progress on the MBNY DB side;
  • the user gets a reward (promo code) with some periodicity
  • for example, after each 5th level is completed according to the rewards logic, that is fetched from the backend API with AJAX request;
  • changing languages according to the MBNY website location.

Results

The development of the game was carried out according to the requirements described in the documentation. The game has been published on the official website of the company.

Technical stack

Technologies used in the project:

  • HTML5, CSS;
  • Javascript;
  • PixiJS;
  • Sass;
  • Firebase;
  • Client-server synchronization;
  • Spine runtime.

Leave a comment

Comment as

Comment as

0 comments