Every single sound effect happens in real time.
TETRIO is at https://tetrioworld.com. No install, no dependencies, open index.html and it runs.
The pitch in one sentence
A browser Tetris where each block cell is hand-drawn per material theme (glass has specular highlights, metal has brushed grain, plastic has those LEGO-style studs) and all 16 sound effects per theme are synthesized live by Web Audio API.
Tech stack
Zero dependencies. No npm, no CDN, no build step. ES modules, private class fields, requestAnimationFrame.
HTML5 Canvas (320x640, 10x20 grid, 32px cells). Web Audio API for sounds (9 theme modules sharing one interface, strategy pattern). Vercel for static hosting, GA4 for analytics.
Architecture is SOLID-ish. Board, Piece, Renderer, SoundEngine, Scoring, InputHandler, EffectsEngine each handle one concern. Files under 1,000 lines, functions under 50. Not for purity reasons. It keeps the codebase from turning into a single massive file I'm scared to touch.
Come play
https://tetrioworld.com. No signup, no install. Try glass theme with crystal sound. Or wood with metal. The mismatched combos are half the fun.
Top comments (1)
The shape rotations aren't right...