Neon Merge
Drop, match and merge glowing orbs — HTML5 physics puzzle
Overview
A cute neon merge puzzle with real 2D physics: drop orbs into the jar, merge two of a kind into bigger ones and chain combos up to the Supernova. Touch, mouse and keyboard, music and sound included.
- Real 2D physics (matter.js) at a fixed 120 Hz step — orbs roll, stack and bounce naturally
- Eleven orb tiers from Spark to Supernova, each with its own colour, pattern and cute face
- Combo multiplier up to x5 for fast merges in a row, floating score pop-ups
- Pop and Shake power-ups, earned every 1,500 points
- Danger line with warning sound, game-over card with biggest orb, merges and best combo
- Animated first-run hint, how-to-play card, pause, sound toggle, best score saved on the device
- Music and 9 sound effects, with a synthesised fallback when audio files cannot load
- Responsive portrait and landscape layouts, high-DPI canvas, touch, mouse and keyboard
Requirements
- Any modern browser (Chrome, Edge, Firefox, Safari 15+, iOS and Android)
- Any static web host — no server code, no database
Technology: HTML5 Canvas · matter.js 0.19 · Web Audio · JavaScript.
Quick start
- Unzip the package.
- Put your licence key and production domain in
LICENSING/licence.json(see Licence activation). - Upload the
game/andLICENSING/folders side by side to your web host, for example to/games/neon-merge/. - Open
https://your-site.com/games/neon-merge/game/index.html. No install, no database, no server code.
To try it on your computer first, start any local web server in the unzipped package folder (localhost is always allowed):
python3 -m http.server 8080
# then open http://localhost:8080/game/index.htmlOpened straight from disk (file://) the game still plays, with synthesised sounds instead of the audio files; always test through a web server.
Licence activation
- Open
LICENSING/licence.jsonand setkeyto the licence key from your purchase e-mail anddomainto your production hostname (for exampleexample.com— no https://, path or port). - Keep the
LICENSING/folder next togame/on your server;game/index.htmlloads../LICENSING/check.js. - Open the game on your domain once — the first production visit activates the key for that domain. The check needs an internet connection; allow
https://vortaxis.comin your Content-Security-Policyconnect-srcif you use one. - Moving to another domain? Request a transfer at vortaxis.com/licence/.
Details: LICENSING/README.txt. The check is an editable compliance check, not tamper-proof DRM; the licence terms apply even if the code is changed.
How to play & controls
Move your finger or mouse to aim, release to drop the orb. Two orbs of the same kind merge into the next, bigger orb. Do not let the orbs stay above the red line. Pop removes one orb, Shake shakes the jar — you earn more of both as you score.
| Aim and drop | Move the finger or mouse, release to drop · ← → or A D to aim, Space / Enter / ↓ to drop |
|---|---|
| Power-ups | Pop button, then tap an orb · Shake button |
| Pause / sound | P or Esc · buttons in the top-right corner |
File structure
game/index.html | The whole game: menus, styles and code in one file. |
|---|---|
game/matter.min.js | matter.js 0.19 physics engine (MIT). |
game/bg.webp | Nebula background picture. |
game/audio/ | Music and 9 sound effects (MP3). |
game/fonts/ | Inter and Unbounded, self-hosted (OFL). |
LICENSING/ | Licence key + domain activation (check.js, licence.json, README.txt). |
documentation/index.html | This documentation. |
LICENSE.txt · THIRD-PARTY.txt · CHANGELOG.md | Licence terms, bundled components, version history. |
Customise & rebrand
Everything lives in game/index.html. Search for these names:
TIERS | Name, radius, colours, glow and pattern of each orb (11 tiers). |
|---|---|
POINTS | Points per merge for each tier. |
JW / JH / DANGER / DROP_Y | Jar width and height, danger-line height and drop height. |
engine.gravity.y | Gravity strength. |
function rndTier | Which orbs can appear next. |
nextGift | Points between Pop / Shake rewards (1,500). |
:root | UI colours (--c1, --c2, --c3, --gold). |
Art and sound
Replace game/bg.webp and the files in game/audio/ with your own, keeping the same names. The orbs are drawn in code from the TIERS table (colours, patterns and faces in makeSprite).
Name and credit
Change the <title>, the meta description and the menu texts in game/index.html. The small "Made by Vortaxis Studio" credit may be kept or removed.
Embed in a page
<iframe src="/games/neon-merge/game/index.html" title="Neon Merge"
width="100%" height="680" allow="fullscreen; autoplay"
style="border:0;border-radius:16px"></iframe>Game portals
The game calls a small events object (P: gameplayStart, gameplayStop, happytime, loadingStart/Stop) — define window.GAME_EVENTS with these methods to connect a portal SDK.
FAQ
Does it need a server or database?
No server code and no database: it is static HTML, CSS and JavaScript on any web host. Production use needs the included licence activation (one HTTPS check from the browser).
Are scores shared online?
No. The best score and the biggest orb are stored in the player's browser (localStorage). There are no accounts, no online features and no ads.
Can I change the art, colours and texts?
Yes. Orb colours, sizes and names are one table in index.html, the UI colours are CSS variables, and the background and sounds are plain files you can replace.
Does it work on phones?
Yes — touch, mouse and keyboard controls, portrait and landscape, high-DPI screens.
What is the difference between Licence and Full source?
Both cover ONE production domain per purchase. Licence = one end product on that domain. Full source adds editable-source rights plus white-label, paid and SaaS use on that domain. Neither allows reselling the game or its source, and neither is an unlimited-installation licence.
Can I put it on game portals and show ads?
Yes, in your own end product on your licensed domain. The game calls a small events object (P: gameplayStart, gameplayStop, happytime, loadingStart/Stop) — define window.GAME_EVENTS with these methods to connect a portal SDK.
Licence
Each purchase (and its licence key) covers one production domain. Licence: use the game in one end product on that domain (yours or one client's). Full source: adds editable-source rights, white-label, paid and SaaS use on that same domain. Neither option allows reselling or redistributing the game or its source, and neither is an unlimited-installation licence. localhost, loopback, *.localhost and *.test hosts are free for development. Full terms: LICENSE.txt and vortaxis.com/licenses.php.
Support & updates
Updates are free. Questions are answered for 6 months after purchase (12 months with Full source) — write to hello@vortaxis.com or use vortaxis.com/store/neon-merge. Need a custom version (your art, extra levels, a portal SDK)? Ask for a quote.