Match The Ink

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

Introduction

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

The main target players:
a. Women aged 18- 35
b. 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.

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).
These mechanics alternate along with all 30 levels of the game.

Technical side

A web game that can be easily included into an existing customer’s website, regardless of it’s 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 canvas.

A user’s nickname and progress is 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 - 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 completed - according to the rewards logic, that is fetched from the back-end 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.

Technology stack