Twisted Rope Sort 3D Project Report
1. The Concept
Twisted Rope Sort 3D is a mobile-first casual puzzle game in which players move groups of colored rope rings between spools until every spool contains a single color. Each spool holds up to four rings, and every valid transfer consumes one move. Locked spools, limited moves, hints, undos, coin rewards, and increasingly complex level layouts add strategy to the familiar color-sorting formula.
The main visual hook is the rope itself. Instead of using flat sprites or smooth torus rings, the game creates twisted 3D rope meshes procedurally. When selected, a rope group lifts from its spool, stretches along a curved path, reaches the destination, and slides down with a weighted landing animation.
2. The Stack
The Stack: HTML5, CSS3, Vanilla JavaScript, Three.js, WebGL, Vite, LocalStorage, and procedural raster UI assets.
The game uses Three.js for the 3D scene, lighting, camera, raycasting, spool models, twisted rope geometry, and animations. Vanilla JavaScript manages game state, movement rules, level progression, rewards, sound, settings, and local saves. CSS provides the mobile-first interface, responsive layouts, result screens, transitions, and procedural confetti effects.
The AI Assist: AI helped turn the initial game idea into a structured MVP, define the target player, design the core loop, organize the technical architecture, generate the UI asset kit, implement the Three.js systems, create and validate levels, improve mobile UI/UX, diagnose browser-loading problems, and iterate on the presentation using visual feedback.
3. The 1 Day Sprint
Morning (Hours 1–3): The sprint began by defining the concept, target audience, core gameplay rules, and MVP scope. The project structure was created with Three.js and Vite. The first playable version included spools, colored rings, tap controls, legal-move validation, limited moves, win and loss states, and data-driven levels.
Afternoon (Hours 4–6): The basic rings were upgraded into procedural twisted ropes using toroidal helix curves and TubeGeometry. Multi-ring movement, locked spools, undo, hints, local progress, coin rewards, sound feedback, and rope lift/stretch/wrap animations were added. A solver was also created to confirm that every level was playable and that each move limit was valid.
The Finish Line (Hours 7–8): The final stage focused on presentation and delivery. The mobile home screen, gameplay camera, three-column spool grid, settings sheet, win and loss screens, and confetti celebration were refined. A standalone build was produced so the game could be opened by double-clicking PLAY_GAME.html without running a server. The source files were reorganized into js/levels.js, js/mains.js, and a root-level style.css, followed by final production and level-validation checks.
4. The Roadblocks
Roadblocks: The first major issue was that opening the development index.html directly prevented Three.js modules and CSS from loading correctly. This was solved by creating a bundled standalone version. Another challenge was presenting several tall 3D spools in a portrait layout without rows overlapping. The spacing, row alignment, camera height, camera angle, and board-fitting calculations required multiple visual iterations. The rope animation also needed careful optimization because rebuilding complex TubeGeometry every frame would be expensive on mobile devices. A reusable dynamic vertex buffer was introduced so only rope vertices are updated during an animation. Finally, some early levels had invalid color counts or locked-spool configurations; the custom solver exposed these problems and verified the corrected level data.
5. Key Takeaways
A small puzzle game still benefits from clear architecture. Separating level data, game rules, rendering, animation, UI, storage, and validation made the project easier to adjust without breaking unrelated systems.
Game feel is as important as the sorting logic. Lift animations, curved rope stretching, weighted landings, sound feedback, haptics, rewards, and confetti turned a functional prototype into a more satisfying game experience.
Mobile-first 3D design requires testing the actual screen composition, not only the world-space coordinates. Camera projection, object height, row spacing, touch clarity, and UI safe areas must be tuned together.
Automated level validation was one of the most valuable additions. It prevented impossible puzzles, confirmed minimum move counts, and made future level creation safer.
My final thought: Twisted Rope Sort 3D demonstrates that a polished browser puzzle game can be built without a large application framework. With focused scope, reusable procedural geometry, data-driven levels, and continuous visual testing, Vanilla JavaScript and Three.js are enough to deliver a responsive and engaging 3D game prototype in a one-day sprint.