Web-based match 3 game built for Maybelline company to attract new customers and promote a new product.
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.
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.
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.
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.