Pin it. Mind the gap. A one-tap timing game with source code
Pinloop is an HTML5 one-tap timing arcade game template with TypeScript source code, ready to upload to any static web host. Players wait for a gap in a rotating target and insert a pin without touching the ones already there. It comes with 30 illustrated collectible targets, 12 backdrop palettes and a local ranking, and the interface is available in 14 languages.
One-button gameplay: insert the pin at the right moment
Click, tap or press Space or Enter to insert a pin. There is no timer: wait for an open gap, because touching a pin already on the target ends the run. Pinloop is one continuous run rather than a level-based game. Rounds keep coming with new targets and rotation patterns, and the best runs are saved in a local ranking.
30 collectible targets and 12 backdrops
30 illustrated targets unlock as players reach new rounds, from a pincushion to a doughnut, and a local collection album tracks every discovery. 12 backdrop palettes change along the way, while the rotation speeds up, slows down and changes direction.
Settings, local records and 14 languages
Settings cover sound volume, mute, less motion and full screen. The interface language is chosen from a dropdown: English, Portuguese, Spanish, French, German, Italian, Dutch, Polish, Turkish, Russian, Indonesian, Japanese, Korean and Simplified Chinese. Best runs and the collection stay in the player's browser, and the edition sends no score or gameplay event anywhere.
Ready to host: upload game/ and play
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, controls, customisation and frequently asked questions.
Who this template is for
Site and portal owners who want a quick one-button game to publish, freelancers and studios preparing a branded casual game for one client, and developers who want to read a small TypeScript project drawn on Canvas 2D.
Customise it
In the TypeScript source, brand.ts holds the title, colours, the list of 30 targets, the 12 backdrops and the storage key. tuning.ts holds timing, collision, density and progress values, skins.ts draws the targets and i18n.ts has the interface text. Bundled sound and music sit in public/audio. Run npm test and npm run build, then copy all of dist/ into game/.
Technical details at a glance
- Stack: TypeScript, Canvas 2D and Vite; the game/ folder has readable HTML, CSS, JavaScript and JSON.
- Needs a modern browser with JavaScript and Canvas 2D, 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 cover the game logic and the standalone setup.
- 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.
