Show HN: Sprite Garden - HTML Canvas 2D sandbox and farming(kherrick.github.io)
kherrick.github.io
Show HN: Sprite Garden - HTML Canvas 2D sandbox and farming
https://kherrick.github.io/sprite-garden/
3 comments
Screencast automating the player from DevTools -: https://gist.github.com/kherrick/d73f2245e704f9e5465b08c3e4e...
Example source automateSpriteGardenFullscreenDig.js - https://gist.github.com/kherrick/7f8cc9d7bfdc9a6951657df8f13...
Example source automateSpriteGardenFullscreenDig.js - https://gist.github.com/kherrick/7f8cc9d7bfdc9a6951657df8f13...
Doesn't work on Firefox...
I've tested https://kherrick.github.io/sprite-garden/ by pressing, "W", "↑", or "space bar" to get started moving in the game. Afterwards the other functionality seems to work as expected in Firefox on Linux with the following versions:
- 140.3.1esr (64-bit)
- 143.0.4 (64-bit)
- 145.0a1 (2025-10-02) (64-bit)
Are you able to describe what issue you are seeing in particular?
- 140.3.1esr (64-bit)
- 143.0.4 (64-bit)
- 145.0a1 (2025-10-02) (64-bit)
Are you able to describe what issue you are seeing in particular?
A 2D sandbox exploration and farming game that runs entirely in the web browser. As a fully HTML, CSS, and JavaScript game, it is highly readable, hackable, and customizable. Included on "globalThis" is the "spriteGarden" global object with the game config and state readily available. Drawing with tiles is as easy as opening dev tools (use the menu in the browser as keyboard is captured), or entering the "Konami Code," for a full screen view and a map editor.
Controls (jump to get started):
- Jump: W, ↑, or Space
- Movement: W/A/S/D or Arrow Keys
- Break Block: R
- Plant/Harvest (select in inventory): F
- Place Block (select in inventory): U/I/O/J/K/L/M/,/.
Features:
- Share games from the world state manager
- Explore unique procedurally generated biomes
- Dig for resources like coal, iron, and gold
- Use collected materials to place blocks and shape the world
- Discover underground cave systems filled with resources
- Plant and harvest different crops with "realistic" growth cycles
Examples:
- Preparing a QR Code to be mined: https://gist.github.com/kherrick/1191ae457e1f6e1a65031c38c2d...
- Drawing a heart in the sky: https://gist.github.com/kherrick/3dc9af05bccc126b11cc26fb30a...
- Entering the Konami Code (map editor / fullscreen): https://gist.github.com/kherrick/effbe1463d9b78da046f27c5d42...
I'm unsure how the game should be taken further, or whether it should progress.
Some potential ideas for the future include:
- Input Box with JS Execution: Provide a safe, sandboxed input area in the game's UI where players can write small JS functions or scripts (instead of exposing it on globalThis).
- API Exposure: Expose a controlled API or object representing game state and functions, like terrain manipulation, crop growth, player movement, to the user script so players can automate or modify behaviors.
- Event Hooks: Allow players to register hooks into game events (e.g., world update, planting crops) where their custom code runs, enabling mods or custom automation.
- Multiplayer: Use WebRTC to allow many players in the same world.
- Actual gamification: Make reasons to play, health meter, powerups, plant combinations, enemies?
- Better mobile controls: Currently on screen, no swiping for movement.
- Easier building with blocks: Currently block position based on location of player.
Also featured on:
- Microsoft Store: https://apps.microsoft.com/detail/9mv5d0990kct
- Wayback Machine: https://web.archive.org/web/20251008155620/https://kherrick....
Feedback is highly welcome, and source is available at: https://github.com/kherrick/sprite-garden