Web Games Arcade

Study

Working question: how much can small browser games do with plain JavaScript and tight constraints?

The answer, so far: quite a bit. Also: every tiny game finds a new way to make state management annoying.

Web Games Arcade is a set of small HTML5 Canvas games. No React. No Unity. No game engine. Just vanilla JavaScript, a shared arcade shell, and a lot of neon because apparently I cannot help myself.

Play now · GitHub · How to play

The games

There are now eight games in the arcade.

Neon Flow: a pipe-routing puzzle where colored streams mix. Connect sources to receivers. Then remember that colors blend when paths cross.

Cosmic Breaker: Breakout with power-ups, multi-ball, particle effects, and bricks that need more than one hit.

Orbit: a gravity toy turned survival game. Launch counter-bodies, disturb orbits, and try not to let the whole system collapse into the middle.

Asteroids: a neon vector shooter with inertia, splitting rocks, waves, lives, and the usual lesson that stopping is harder than going.

Starfall Armada: a fixed-screen shooter inspired by Space Invaders. It has descending formations, bombs, destructible shield bunkers, escalating waves, and a bonus mothership that is worth shooting if you are not already panicking.

Circuit Chase: a maze chase inspired by the old dot-eating arcade pattern. It has a tile-map maze, dots, power nodes, four glitch hunters, frightened mode, tunnel wrapping, and a small pathfinding helper that will probably become useful again later.

Neon Blocks: falling blocks with a 7-bag randomizer, lock delay, hold, hard drop, ghost piece, and the permanent human problem of putting the block one column too far left.

Elemental Sandbox: a falling-sand cellular automaton. Sand, water, fire, oil, acid, plant, wood, stone, steam, and smoke interact by local rules. It is less a game and more a little mess machine.

Architecture

The project is a hub-and-spoke monorepo. The lobby loads one game cartridge at a time. The shared core/ provides the useful boring parts: GameLoop, Vector2, AudioManager, StorageManager, ParticleSystem, StateMachine, and responsive canvas scaling.

Each game implements the same cartridge shape: constructor(container, onGameOver), init(), stop(), and resetGameState(). That keeps the lobby simple and makes restarts less hacky than tearing the whole canvas down and rebuilding it.

The newer games pushed the architecture a bit further. Starfall Armada added a stricter release checklist for new cartridges. Circuit Chase added a renderer-free maze layer: tile-map parsing, walkability checks, grid stepping, and shortest-path hunter movement live in a plain logic module instead of being buried in canvas rendering.

The arcade also shows controls below each loaded game. Mouse, keyboard, and touch controls are explicit now, which matters because these games do not all share the same input shape.

The current production build is still small: about 123 KB of application JavaScript and 8 KB of CSS before gzip. No external runtime dependencies.

Why no framework

Partly taste. Partly constraint.

A canvas game loop is a tight little machine. Every frame asks the same questions: read input, update state, draw pixels, do it again. With direct canvas calls and small modules, the code stays close to that loop.

It also makes the project useful as a learning object. Open the source. Read the update method. Follow the collision check. There is no engine editor hiding the interesting bit.

Stack

• Vanilla JavaScript with ES modules
• HTML5 Canvas 2D
• Web Audio API for synthesized sound
• Vite for dev server and production builds
• Vitest for 278 unit tests
• Zero runtime dependencies

See also: Projects, Accidental Overlord, Void Crawler, Pulse of the World, Literature Clock