DOM BattlefieldSherman Bytes, a whole platoon.
Command a squad of up to twelve Sherman tanks on a cyberpunk grid built from real page elements. Plan every wingman's route before the shooting starts, then redirect them under fire in Command mode. Breach cover, take the enemy HQ, repair at yours. It is a separate app layered on Sherman Bytes: same tanks, its own battlefield.
Coming soon Multiplayer: two players, two pages, one battle.
Created by Chris Cooley · coded.design
Four layers. One borrowed tank.
- MODEL
Rules with no DOM
Maps, terrain health, squads, orders, pathfinding, aiming, combat, repairs and objectives are plain serializable data. Commands carry no elements, so the same state could one day sync over a network.
src/model.ts - VIEW
The grid is real DOM
Every square is an element in a CSS grid and every tank is a button. Destroyed cover changes a data attribute instead of rebuilding the board, and the camera is native scrolling.
src/view.ts - ART
Sherman draws the tanks
Each tank button holds a small cached canvas drawn by Sherman Bytes' own sprite code, snapshotted with its SHA-256 provenance. Battlefield adds zero bytes to the Sherman game.
shared/sherman-sprites.ts - SHELL
One loop, a mobile cockpit
Input, aim modes, the follow camera and the HUD share one fixed 60 Hz loop with bounded catch-up. On phones a gate holds the battle until landscape and full screen, with thumb rails clear of notches.
src/client.ts
Battlefield has its own base now.
The game has its own site: a landing page with a live battle in the hero, and the Board UI style guide every key, card, overlay and launch burst in Battlefield follows. Same game, same cartridge; its design lives with it.
DOM BATTLEFIELD · WEBSITEThe Battlefield site: watch the tanks wreck the heroThe game, how a battle plays, the four fronts and the cockpit on every screenNEW · THE BLITZ VERSIONBattlefield Blitz: every tank for itselfFree for all, parachute respawns, the blinking grid and airstrikes. Built on Fizlet; drops onto any pageDESIGN SYSTEM · LIVEBoard UI: the game board and controls design systemLive keys, cards and overlays, the palette you pass in, and the spec for humans and agents