Merge Solitaire Project Report
1. The Concept
Merge Solitaire is a cute, mobile-first number puzzle game. Players drag colorful number-block stacks across a four-column board and merge matching values to create larger numbers: 2 + 2 = 4, 4 + 4 = 8, and onward to the highest milestones.
The experience is designed to feel simple, friendly, and rewarding. Each block has a clear number, a playful animal character, soft glossy styling, satisfying movement, rewards, and sound feedback. The goal is to make a familiar merge mechanic feel polished and easy to understand on both mobile and desktop screens.
2. The Stack
The Stack: Vanilla HTML, CSS, and JavaScript in one executable index.html file. The project has no framework, backend, database, npm packages, build process, or external game engine.
Game progress is stored with browser LocalStorage. Audio uses local MP3 files from the sound/ folder. The interface is responsive and built around a 9:16 mobile game layout.
The AI Assist: Codex supported implementation, interaction design refinement, gameplay logic, visual polish, sound integration, testing, and documentation while keeping the project lightweight and self-contained.
3. The 1 Day Sprint
Morning (Hours 1–3): Defined the game shell, central configuration, start screen, game state, local progress saving, responsive layout, and the initial 4-column game board.
Afternoon (Hours 4–6): Built the core drag-and-drop gameplay. This included moving block stacks, bottom-only placement rules, equal-number merging, chain resolution, score updates, coins, milestones, power-ups, game-over handling, and pause behavior.
The Finish Line (Hour 7-8): Polished the visual experience with glossy 3:4 animal blocks, clearer drag/drop hints, drop and merge animations, reward popups, compact pause controls, local sound effects, background music, and a README guide.
4. The Roadblocks
Roadblocks: The hardest part was making the drag-and-drop rule easy to understand and behave correctly. A player can drag a block together with every block below it, but can only place the stack at the bottom of another column. Matching values merge only when the target is the bottom-most block; a card with another card below it is intentionally blocked.
Additional challenges included keeping overlapping 3:4 blocks visually readable, ensuring full columns reach the board bottom cleanly on mobile screens, preventing cards from rendering outside the board, avoiding accidental game-over states, and restoring drag input correctly after reward popups close. These issues were addressed through layout rules, clear target highlights, state checks, and regression testing.
5. Key Takeaways
A simple game feels much better when each action communicates clearly: a visible drop target, a clear merge hint, a responsive animation, a sound cue, and a meaningful reward.
Keeping the project in one well-organized HTML file made it fast to run, easy to share, and straightforward to maintain without dependencies. Centralized configuration also makes it simple to adjust gameplay balance later.
My final thought: Merge Solitaire now has a strong playable foundation: clear core rules, charming visuals, rewarding feedback, local saving, and a lightweight technical structure ready for future polish and content updates.