Blast Yard
A browser bomb-battler. Four players, grid arena, destructible blocks, powerups,
last one alive wins. The client is a static site with no build step; online
games run on a small Node server that owns the match.
Running it locally
The game is built from ES modules, so opening index.html straight off your
disk (a file:// address) will not work. Browsers block module loading there.
Serve the folder over HTTP instead. From this directory:
npx http-server -p 8099
Then open http://127.0.0.1:8099. Any static server will do. That is enough
for local play on one keyboard.
For online games, start the server too, in a second terminal:
cd server && npm install && npm start
On localhost the client finds it by itself. See server/README.md for
deploying and for the message protocol.
Deploying
Two pieces, because a game server has to keep running and Vercel cannot do
that:
- The client still deploys by pushing the repo to Vercel or GitHub Pages.
- The server goes somewhere that keeps a process alive, such as Render.
Then put its
wss:// URL in src/config.js.
Layout
index.html canvas, touch pad, and the module entry point
src/main.js wires the parts together and runs the frame loop
src/game.js rules and simulation. No drawing, no networking, no DOM
src/render.js draws a view object onto the canvas
src/net.js the WebSocket connection to the server
src/snapshot.js the snapshot format, shared with the server
src/config.js where the server lives
src/input.js keyboard and touch
src/ui.js menu and lobby screens
src/constants.js values shared by all of the above
src/maps/ one file per map, data only. See src/maps/README.md
server/ the game server. See server/README.md
game.js holds the tuned numbers for movement, bomb timing and blasts. It
never reads the DOM, so the same file runs in the browser for local play and on
the server for online play. There is one copy of the rules and it cannot drift.
The lobby
Everyone in a room sees the same lobby screen. The server owns it and sends it
out after every change, so there is never a version only one person can see.
- Type a name. It is kept in this browser, so nobody retypes it next time.
- Each player has their own ready toggle.
- Whoever made the room picks the map; everyone sees the choice.
- Only that player can start, and only once two players are ready.
- When someone leaves, they disappear from everyone's list.
- The room owner picks best of 3, 5 or 7.
- Between rounds everyone gets the same scoreboard, counting down to the next
round. Nobody has to tap anything until the match is over.
- When a match is settled the lobby comes back, showing who has won how many
matches. Everything is counted in memory for the session only and is never
stored anywhere.
Four players to a room. A fifth is told the room is full.
Maps
A map is a file of plain data, including the arena itself as a grid of
characters you can type:
'#1__.......__3#',
'#_#.#.#.#.#.#_#',
Three ship: The Yard (the original), Scrapheap (dense, fast) and Waterworks
(water, conveyors, a teleport pair). Adding one is a new file plus a line in
src/maps/index.js. src/maps/README.md has the full character list.
Controls
Arrow keys or WASD to move, space or enter to drop a bomb, K or left shift to
kick.
On a phone a four way joystick appears automatically. Put your thumb anywhere
on it and the knob snaps to the direction you are asking for; roll from one
direction to the next without lifting, and hold as long as you like. Add
?pad to the URL to force the touch controls on a laptop.
Four players can share one keyboard: arrows, WASD, UHJK and the numpad.
