Gridspark: place, clear, spark!
Gridspark is an HTML5 block puzzle game template with full source code, written in plain JavaScript on Canvas 2D. Players drag shapes onto an 8×8 board, complete rows and columns, and clear lightning blocks to charge ZAP. Classic mode, a seeded daily challenge, touch and mouse controls and 14 interface languages are already built in. You get the ready-to-host game folder, the editable source and a manual in English and Portuguese.
Drag shapes onto an 8×8 board
Drag connected shapes from a hand of three onto the board. Complete any row or column to clear it and make space. The run ends when no piece in the hand fits and no ZAP is left. The first session teaches the opening move, and desktop players can pause with the pause icon or P / Esc.
Charge ZAP with lightning blocks
Some blocks carry a lightning mark. Clear them to charge ZAP, and watch for the next chance to open the board.
Spend ZAP to clear a row and a column
Select ZAP, then choose a cell. The move clears the occupied blocks in that cell's row and column, not the whole board.
Combos and personal bests
Plan consecutive clears to build combos, earn the perfect-clear bonus and aim for a new personal best, saved in the player's browser.
Classic mode and a seeded daily challenge
Classic mode is ready whenever players want another run. The Daily Challenge uses a seeded board sequence and a score goal, with progress and streaks saved locally. It changes at 00:00 UTC, which can differ from local midnight.
Touch and mouse controls, 14 interface languages
Drag and place with touch or mouse. The interface comes in English, Portuguese, Spanish, French, German, Italian, Dutch, Polish, Turkish, Russian, Indonesian, Japanese, Korean and Chinese, chosen from a globe selector on the Home or Pause screen. The narrator voice is English only, and the sound panel has separate music, effects and voice volumes.
Host it on any static web server
Upload the contents of the game folder to any HTTP/HTTPS host and open the folder URL: no PHP, database, Node.js installation or game-server account. It works in a subfolder or inside an iframe. The manual covers installation, screens and controls, customisation, local data, 20 FAQs and troubleshooting.
What this edition does not include
This is a single-player local edition. Online multiplayer and leaderboards, accounts and save sync between devices, advertising SDKs with ad-based undo or revive, narration in all 14 languages and native app-store builds are not included.
Who this template is for
Site and portal owners who want a finished block puzzle for their visitors, freelancers and studios building one client's branded game, and developers who want to learn from a readable codebase of plain JavaScript modules with no runtime libraries.
Customise it
Two settings need no rebuild: the tap-to-start screen and the fullscreen button, both in gridspark.config.js. Deeper changes go in the source folder: interface text in src/locales.js, rule constants and the colour palette in src/config.js, the puzzle rules in game.js, board.js, generator.js and shapes.js, and the drawn logo and blocks in logo.js and render.js. Run npm test and npm run build to copy the playable files to game/.
Technical details at a glance
- Stack: plain JavaScript ES modules and Canvas 2D, with no third-party runtime dependency.
- Files: HTML, CSS, JavaScript and JSON, plus the editable source folder.
- Saves: settings, language, current run, personal best and daily progress stay in the browser's local storage.
- Requirements: a modern browser with JavaScript and ES modules, and any static HTTP(S) host; file:// is not supported. No npm install, build step, PHP, database or account to install and play.
- Optional developer tools need Node.js 20+ and have no npm dependencies.
- Also included: game audio, the English narrator voice and the Baloo 2 font with its licence.
Licence and support in short
One purchase gives you a perpetual, non-exclusive licence to use this edition in one end product, yours or one client's. Players can access it free of charge or through advertising monetisation. You can change the code, art and audio inside your product, but you cannot resell or redistribute the template on its own. Six months of support are included (12 with the extension at checkout) and cover installing and using the files and fixing reproducible defects.
