Spin. Slip. Smash. A 3D tower-drop game with source code
Twirldrop is an HTML5 3D tower-drop arcade game template with TypeScript source code, ready to upload to any static web host. Players turn a ceramic tower so a bouncing ball falls through the gaps, in a 30-tower campaign or an endless Descent. The interface ships in 14 languages, and progress is saved in the browser, so there is no server, database or account to set up.
Endless Descent mode: one run, as deep as you can go
Descent is the main Play action: one endless tower, one run. Points and depth records are kept in the player's browser, and the local ranking lists that player's own best runs. Nothing is sent to a server, so the edition needs no ranking backend.
30-tower campaign built from readable files
The campaign is a separate path of 30 towers. Each tower is defined in readable source files, and towers 13 to 30 are built from the same blocks as the endless mode, so editing those blocks reshapes both.
One-finger controls: turn the gap into a path
Hold and drag to rotate the tower; the ball bounces by itself. Line up a gap and it drops to the next floor. Striped red sectors with spikes mark the danger.
The smash charge: three gaps in a row
Pass three gaps in a row to arm a charge. The charged ball smashes through the next occupied floor once, then the charge ends. Gold shows the charge; red shows danger.
Cosmetic ball finishes
The ball starts in Pearl; Coral, Lagoon and Brass finishes unlock as players complete campaign towers. Finishes change the look only, never the rules.
Touch, mouse and keyboard in 14 languages
Drag with a finger or a mouse, or use the arrow keys. Settings cover sound, controls, less motion, effects quality and full screen. The interface language is picked from a dropdown: English, Portuguese, Spanish, French, German, Italian, Dutch, Polish, Turkish, Russian, Indonesian, Japanese, Korean and Simplified Chinese.
Ready to host: upload game/ and it runs
Upload the contents of game/ to any static host over HTTP or HTTPS and it runs: no PHP, database or account. Asset paths are relative, so it also works in a subfolder or in an iframe on your own page. The illustrated English and Portuguese manual covers installation, the file map, customisation, local data and troubleshooting.
Who this template is for
Site and portal owners who want a finished 3D arcade game to publish, freelancers and studios reskinning a casual game for one client, and developers who want to read how a TypeScript and Three.js game is organised.
Customise it
In the TypeScript source, brand.ts holds the name, colours and storage key, tuning.ts the rules, movement, camera and input, towers.ts the campaign and endless.ts the endless blocks. Interface text lives in i18n.ts and the bundled music and effects in src/assets/audio. Run npm test and npm run build, then copy all of dist/ into game/.
Technical details at a glance
- Stack: TypeScript, Three.js, WebGL2 and Vite; the game/ folder has readable HTML, CSS, JavaScript and JSON.
- Needs a modern browser with JavaScript and WebGL2, and a static HTTP or HTTPS host (file:// is not supported).
- Node.js 22.12+ and npm are needed only to edit and rebuild the source; optional automated tests are included.
- Not included: online ranking or multiplayer, cloud saves or accounts, advertising SDKs, native apps and hosting.
Licence and support in short
You get a perpetual, non-exclusive licence for one end product, yours or one client's. Players may access it free of charge or through advertising monetisation. You can change the code, art and audio inside your product, but not resell the template itself. Six months of support are included, or 12 with the extension chosen at checkout.
