DEV Community

Kisnner Obando
Kisnner Obando

Posted on

How I generate all art and audio with code for a 500+ game static site (zero image/audio assets, zero backend)

Context: a local-multiplayer game collection, 500+ games, served as
plain static files from GitHub Pages — https://kisnner26.github.io/2-player-web/
(source: https://github.com/kisnner26/2-player-web)

The part I think is relevant to this sub: there are no image files and
no audio files anywhere in the project. Every sprite is drawn with
canvas/CSS at runtime, and every sound — music included — is
synthesized on the fly with the Web Audio API. No asset pipeline, no
CDN, no loading spinners waiting on a sprite sheet.

Some of what that decision forced:

  • 39 of the games are real 3D with hand-written physics (friction, bounce, pendulums) — rendered without a single texture file
  • 261 arenas are procedurally generated per match, not hand-authored
  • avatars are generated from a photo entirely client-side, no upload, no server round-trip
  • the whole keyboard-game catalog (500 games) works as pure static files — no server needed at all, which is why GitHub Pages can serve it as-is

Stack is plain HTML/CSS/JS, one folder per game, no framework, no
bundler. Happy to go into how the procedural audio synthesis or the
physics engine work if it's useful to anyone building something
similar.

Top comments (1)

Collapse
 
_e7d82c08f61159ad3b2ea profile image
雷笛歌 •

The zero-assets constraint is a fun forcing function. I like that each game stays as plain static files; the tradeoff I’d watch is startup cost when every game creates its own audio context, especially on mobile. A shared lazy AudioContext could help.