MeDo-Mahjong 3D

Inspiration Mahjong Solitaire is a timeless classic, but rendering it in full interactive 3D with complex layout layering traditionally requires thousands of lines of boilerplate code, math matrices, and texture rendering logic. We wanted to see how far we could push MeDo's natural-language engine by iteratively prompting it to build a production-ready, highly polished 3D puzzle game using React Three Fiber without typing manual syntax.

What it does MeDo-Mahjong 3D provides a stunningly crisp, fully interactive browser puzzle game. Players can dive into multiple intricate tile layouts (including classic Turtle, Dragon, Pyramid, Fortress, and Spider). The app features:

A responsive HUD tracking scores, a Combo Multiplier, and a countdown timer.

Smart power-ups including an Undo system with a time-rewind 3D animation, a Hint system that reveals free pairs, and an auto-shuffling mechanism for dead ends.

A fully local Leaderboard that saves your fastest times and highest scores via Local Storage.

How we built it The app was engineered incrementally inside the MeDo environment over 19 major iterations:

Core Systems: Established the 144-tile rendering engine using standard bounding boxes and procedural CanvasTexture generation.

Audio & Interactions: Routed smooth, pentatonic audio cues through a custom master reverb using Web Audio mechanics for a soothing atmospheric vibe.

Advanced 3D Graphics: Upgraded the tiles to modern RoundedBox geometry and integrated a screen-space post-processing pipeline featuring Bloom, Vignette, and high-fidelity anti-aliasing (MSAA).

Challenges we ran into The Blur & Resolution Dilemma: Early versions suffered from blurry texturing on high-density displays. We had to guide the generator to scale Canvas device pixel ratios (DPR) and hardcode a safe, performance-friendly anisotropy filtering level of 4 to keep tiles perfectly sharp across all screen widths.

Camera Motion Sickness: A dynamic drifting camera was initially added for realism, but early testing proved it caused motion sickness. We instantly pivoted, creating a locked, highly stable isometric view with a smooth intro-zoom instead.

Texture Mapping Edge Cases: Fixed a critical gl is not defined bug in the canvas texture generator by decoupling the texture parameters from device-specific renderer configurations.

Accomplishments that we're proud of We successfully achieved an addictive, retail-grade gameplay loop without writing manual WebGL or state architecture. Features like the mouse-following spotlight, the 3D matching particle bursts, and the auto-rotating victory camera feel like they were built by an entire studio, yet they were engineered rapidly through smart AI collaboration.

What we learned We realized that rapid app-building requires precise structural decomposing. Breaking features into isolated, modular state requests (e.g., separating tile mechanics from rendering parameters) is the secret to building heavy, state-driven 3D applications effortlessly with AI.

What's next for MeDo-Mahjong 3D We intend to leverage MeDo's backend capabilities to introduce global multiplayer speed-runs, customizable unlockable tile sets (like a dark mode or cyberpunk theme), and a personalized AI companion that adapts its hint speed to player capability.

Built With

• biome
• localstorage-api
• react
• react-three-fiber-(r3f)
• tailwind-css
• three.js
• typescript
• vite