Case Studies 6 min read

How Plokk Was Built: Concept to Microsoft Store in 6 Weeks

By RatataLabs Team |

Plokk was born from a simple observation: block puzzle games dominate the casual mobile gaming charts, but the browser-based versions are uniformly bad. They are riddled with ads, lack progression systems, and feel like they were built in 2012. There was a clear opening for a polished, modern block puzzle with competitive features that works instantly in a browser tab.

The competitive analysis revealed that successful block puzzles share three traits: simple core mechanics that anyone can learn in 30 seconds, emergent strategic depth that rewards experienced players, and a compelling reason to come back daily. Games like 1010! and Woodoku nailed the first two but relied on ad-supported retention rather than genuine engagement systems. Plokk aimed to add real progression, competitive leaderboards, and daily challenges to the proven block-placement formula.

The decision to build for the web first rather than mobile was deliberate. Browser games have zero install friction, which matters enormously for user acquisition. A shareable URL beats an app store listing every time for initial virality. The Microsoft Store release came later as a distribution bonus, not the primary platform.

The core game engine was vibecoded with an AI assistant in roughly three days. The 10x10 grid, 18 unique block shapes, placement validation, line-clearing logic, and combo detection were all generated through iterative prompting. The AI was particularly effective at implementing the collision detection and line-clearing algorithms because these are well-understood computational problems with clear specifications.

Where vibecoding struggled was with game feel. The timing of animations, the weight of block placement, the satisfaction of a combo clear — these are aesthetic decisions that an AI assistant cannot make for you. We spent more time tuning the 200-millisecond delay between consecutive line clears and the easing curve of the score popup animation than we spent on the entire placement engine. Game development is deceptive this way: the logic is 20% of the work, and the polish is 80%.

Sound design followed a similar pattern. We used AI to generate initial sound effects for placement, clearing, combos, and game over events, then manually adjusted pitch, duration, and layering to create an audio identity that felt cohesive. The distinct audio feedback for single clears, double clears, and triple-plus combos gives players an immediate sense of how well they performed without looking at the score.

Plokk's progression system has 50+ player levels, each with a unique title from Beginner through Neon Legend. XP is earned from every game based on score, combo multipliers, and special achievements like clearing multiple lines in a single placement. The XP curve follows a standard exponential formula where early levels come quickly to hook new players while later levels require consistent high-level play.

The gem currency system provides an additional reward loop. Gems are earned through gameplay milestones, daily challenge completion, and achievement unlocks. They can be spent on cosmetic block themes that change the visual appearance of the game. Crucially, gems cannot be purchased with real money. This was a deliberate design decision to position Plokk as a fair competitive game rather than a monetized casino.

Twenty achievements across five categories (score milestones, combo feats, daily challenge streaks, level thresholds, and special accomplishments) give players medium-term goals that cut across individual sessions. Achievement design is an underappreciated art: each one should feel attainable but not trivial, and the path to earning it should teach the player something about the game's strategic depth.

Plokk uses Firebase Firestore for leaderboard storage and real-time player count. The leaderboard system tracks daily, weekly, and all-time high scores, with each period resetting on a predictable schedule. Firestore's real-time listeners allow the leaderboard to update live during active play sessions, so players can see themselves climbing or being overtaken.

The real-time online player count was a small feature with outsized psychological impact. Showing "47 players online" in the corner of the screen transforms a solo puzzle game into a shared experience. The implementation uses Firestore's presence system: each active client writes a heartbeat document that expires after 60 seconds of inactivity. A Cloud Function periodically counts active heartbeats and writes the total to a shared document that all clients listen to.

Leaderboard integrity required server-side score validation. Submitting scores directly from the client would make it trivial to post fake high scores. Instead, Plokk sends the game's move log (a compact array of placement coordinates and block IDs) to a Cloud Function that replays the game deterministically and verifies the final score matches the claimed value. This replay-based validation catches any client-side score manipulation.

Tip: Leaderboard scores are validated server-side by replaying the game's move log deterministically. Claimed scores that do not match the replay are rejected.

The daily challenge is Plokk's most competitive feature. Every day at midnight UTC, a new puzzle is generated that is identical for all players worldwide. This is achieved through seeded random number generation: the seed is derived from the current date (formatted as YYYYMMDD), so every client independently generates the same block sequence without any server coordination.

The seeded PRNG uses a simple but effective algorithm: a hash of the date string produces a 32-bit seed, which feeds a Mulberry32 generator that produces the sequence of block shapes for the entire game. Because the sequence is deterministic, every player faces the exact same decisions in the exact same order. Skill, not luck, determines who tops the daily leaderboard.

Daily challenges have a separate leaderboard that resets every 24 hours, creating an urgency that the all-time leaderboard lacks. Players can only submit one score per day, so there is no grinding. You get one attempt to perform your best, review your mistakes, and try again tomorrow. This constraint was controversial during development but proved to be the feature that drives the strongest daily retention.

Plokk integrates an AI hint system powered by Google Genkit that analyzes the current board state and suggests optimal block placements. When a player activates a hint, the current grid state and available blocks are serialized and sent to a Genkit flow that evaluates placement options based on line-clearing potential, board openness, and future flexibility.

The hint does not just show where to place the block. It explains why: "Place the L-shape in the top-right corner to complete row 2 while keeping column 8 open for the upcoming I-piece." This educational framing turns the hint from a crutch into a teaching tool, helping players develop their own strategic intuition over time. The explanatory text is generated by Gemini through a prompt that receives the board state and optimal placement as context.

Hints are limited to 3 per game to prevent players from simply following AI instructions for every move. The limit forces players to save their hints for genuinely difficult situations, which maintains the game's challenge while providing a safety net that prevents frustrating dead ends.

Publishing Plokk to the Microsoft Store was surprisingly straightforward. We used PWABuilder, Microsoft's tool for converting Progressive Web Apps into MSIX packages. The process involved generating the package from Plokk's existing manifest.json and service worker, adding store listing assets (screenshots, descriptions, promotional images), and submitting through the Microsoft Partner Center.

The certification process took about 48 hours and passed on the first attempt. The main requirements were functional offline support (already handled by the service worker), appropriate content ratings, and privacy policy compliance. The hardest part was producing screenshots at the exact resolutions the Store requires, which involved more time in image editing software than in code.

Having a Microsoft Store listing provides legitimacy and discoverability that a standalone URL cannot match. Users who search for "block puzzle" in the Windows Store now find Plokk alongside established titles. The Store also handles automatic updates through the PWA's service worker, so we did not need to build a separate update mechanism for the packaged version.

Building Plokk from concept to Microsoft Store listing took six weeks of part-time work. Vibecoding was instrumental in the first week, getting the core game engine functional in days rather than weeks. But the remaining five weeks were almost entirely manual work: tuning game feel, designing the progression system, building leaderboard infrastructure, testing edge cases, and polishing the visual and audio experience.

The key lesson is that vibecoding excels at generating functional code for well-defined problems but cannot replace the subjective design decisions that make a game enjoyable. An AI can implement line-clearing logic perfectly but cannot tell you whether the combo animation should last 300 milliseconds or 500. These decisions require playtesting, iteration, and taste. The developers who will succeed with vibecoded games are those who use AI to eliminate the boilerplate and invest the saved time into the craft that makes players come back.

Related Articles

Case Studies

Building HevyDuty AI: AI Workout Builder Case Study

6 min read

Case Studies

SimplBiz: AI Receipt Scanning on Google Drive

6 min read

Case Studies

EdImport: Automating Slovenian Tax Filing for Foreign Investors

5 min read

Explore More

Discover more articles about vibecoding, AI development, and modern web apps.

All Articles