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

  1. Unzip the package.
  2. Put your licence key and production domain in LICENSING/licence.json (see Licence activation).
  3. Upload the game/ and LICENSING/ folders side by side to your web host, for example to /games/neon-merge/.
  4. 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.html

Opened straight from disk (file://) the game still plays, with synthesised sounds instead of the audio files; always test through a web server.

Licence activation

  1. Open LICENSING/licence.json and set key to the licence key from your purchase e-mail and domain to your production hostname (for example example.com — no https://, path or port).
  2. Keep the LICENSING/ folder next to game/ on your server; game/index.html loads ../LICENSING/check.js.
  3. 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.com in your Content-Security-Policy connect-src if you use one.
  4. 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 dropMove the finger or mouse, release to drop · ← → or A D to aim, Space / Enter / ↓ to drop
Power-upsPop button, then tap an orb · Shake button
Pause / soundP or Esc · buttons in the top-right corner

File structure

game/index.htmlThe whole game: menus, styles and code in one file.
game/matter.min.jsmatter.js 0.19 physics engine (MIT).
game/bg.webpNebula 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.htmlThis documentation.
LICENSE.txt · THIRD-PARTY.txt · CHANGELOG.mdLicence terms, bundled components, version history.

Customise & rebrand

Everything lives in game/index.html. Search for these names:

TIERSName, radius, colours, glow and pattern of each orb (11 tiers).
POINTSPoints per merge for each tier.
JW / JH / DANGER / DROP_YJar width and height, danger-line height and drop height.
engine.gravity.yGravity strength.
function rndTierWhich orbs can appear next.
nextGiftPoints between Pop / Shake rewards (1,500).
:rootUI 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.