3-15 Game

Through previous projects, I had gained some experience with Flutter app development and the app store release process. For this project, I wanted to go beyond simply completing and releasing an app and directly design a game structure that users could play repeatedly.

The starting point was the idea, "What if I combined a game mechanic based on making a target number sum with a 3-match puzzle?" 3-match puzzles have the advantage of intuitive rules that anyone can understand easily. However, I felt that simply implementing the standard mechanic of matching three identical bubbles would not make the project distinctive enough.

So I applied the rule of "three number bubbles whose sum is 15" instead of "three identical images." Rather than simply finding the same shapes, players need to move number bubbles and quickly judge which combinations add up to 15. I wanted to create a game that blends a familiar puzzle structure with calculation-based puzzle elements, encouraging players to act, calculate, and try again within a short time.

Most of my previous apps had focused on local features. This time, I wanted to store game scores in an external database and implement a global leaderboard where users could compare rankings with other players. I used Supabase for this. Supabase provides a Postgres database for each project, and a Flutter client can also interact with the database through the Supabase library. [Supabase - Database Overview][Supabase - Flutter Reference]

The goals of this project were as follows.

Setting the Development Goals

The goals of 3-15 Game were to implement a global leaderboard based on a Supabase database and to use Cursor-based vibe coding more systematically than before.

I divided the feature scope into stages from the beginning. First, I implemented the core game rule: swiping a number bubble to swap it with an adjacent bubble and removing three numbers whose sum is 15 as a result of the swap. On top of that, I sequentially added 60-second rounds, combo rewards, striped bubbles, star bombs, ad rewards, and a global leaderboard.

What I wanted to verify through this project was not simply whether I could complete a game. By using Supabase to store user scores and provide a global leaderboard, I wanted to see how ranking competition could affect repeat play and app engagement. I also wanted to experiment with using Cursor-based vibe coding in a more controlled way, improving development speed and efficiency while still managing code quality.

System Architecture

3-15 Game was implemented with a structure where the Flutter app handles the game board, swipe input, number bubble swapping, match detection, timer, combos, and special bubble generation internally, while score data is stored in an external database through Supabase. When the player touches a number bubble and swipes in a direction, the bubble swaps positions with the adjacent bubble in that direction. If the swap creates a combination whose sum is 15, the match is processed and the score is updated. Instead of building a separate server directly, I used Supabase as the external data store for the global leaderboard.

Core Implementation Flow

Game Rule Design

The first thing I decided was the core rule of the game. Instead of matching identical bubbles like a traditional 3-match puzzle, I designed the rule so that bubbles are removed when the sum of three number bubbles becomes 15.

For example, when three number bubbles such as 4, 5, and 6 are placed side by side horizontally or vertically, they are removed because their sum is 15. The player swipes number bubbles to swap them with adjacent bubbles, and if the swap creates a valid combination, the match is processed. This rule was chosen to create a calculation-based experience where players quickly find number combinations rather than making simple visual matches.

Implementing the Game Board and Post-Swap Match Detection

On the game board, I needed to manage the positions of number bubbles, selection state, swipe direction, and swap results together. When the player touches a specific number bubble and swipes in a desired direction, the game finds the adjacent bubble in that direction and swaps the positions of the two bubbles.

After the bubbles are swapped, the game checks number combinations in horizontal and vertical directions based on the updated board state. A match is accepted only when three adjacent number bubbles add up to 15, and then score updates, bubble removal, and new bubble filling are processed in order. By separating input handling, bubble swapping, match detection, and board updates, I structured the game so that the game state would not become tangled.

Implementing 60-Second Rounds and the Combo Structure

I wanted the game to be a fast challenge that players attempt within a short time, rather than a puzzle that continues for a long time. So I set the basic play time to 60 seconds and designed the game so players would try to achieve the highest possible score within the time limit.

When consecutive matches occur, the combo level rises, and as combos accumulate, bonus time and bonus score become larger. This structure was designed to encourage players not to stop after a single match, but to keep searching for the next combination.

Implementing Special Bubble Generation and Effects

To add variety to the game, I added striped bubbles and star bombs. A regular three-bubble match removes only those number bubbles, but when four or more number bubbles are matched, a striped bubble is created. When a cross-shaped double match occurs where horizontal and vertical matches are completed at the same time, a star bomb is created.

Implementing a Supabase-Based Global Leaderboard

After the game ends, the user’s score is stored in Supabase, and a list of top scores is loaded and displayed on the global leaderboard. This allows users to compare their scores with other players.

Supabase provides a Postgres database for each project, and Flutter clients can also interact with the database through the Supabase library [Supabase - Database Overview][Supabase - Flutter Reference]. In this project, I used that structure to implement score storage and retrieval without directly building a separate server.

Implementing the Ad Reward Flow

I applied a flow that provides extra time when the player watches an ad after game over or when time is running low. Because the reward should be granted only after confirming that the ad has been watched, I needed to manage both ad display and game state handling together.

Vibe Coding Approach

This project was also developed using Cursor with a vibe coding approach. In the early stages, it helped me quickly build the foundation of the overall behavior, such as generating the game board, placing number bubbles, and implementing basic match detection logic.

However, as the number of features increased, the code structure became increasingly complex, and the burden of reviewing and modifying generated code also grew. Problems occurred frequently when modifying areas where several pieces of logic interacted, such as animation handling, bubble removal and new bubble generation, and special bubble handling. There were also cases where the desired requirements were not reflected all at once, or modifying one feature affected another feature.

I also faced greater difficulty when changing existing features in a completely different way or adding new feature ideas during the project. As features were added or existing implementations were changed, the code flow became easy to tangle, and it became increasingly difficult to track and control changes as the work progressed.

Through this experience, I confirmed that AI-assisted development can help increase initial implementation speed, but as the project grows, the developer must take direct responsibility for structural design and quality management. METR’s 2025 study also reported cases where experienced open-source developers took longer to complete tasks when using AI tools under certain conditions. Although this study cannot be generalized to every situation, it shows that the cost of reviewing and modifying AI-generated output is important in the actual development process. [METR - Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity]

Store Release