The latest articles on DEV Community by Aaron West (@muddywoody). https://dev.to/muddywoody https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4022825%2Ffc71e4ab-7520-42cd-b29f-741bff55af94.png https://dev.to/muddywoody en Aaron West Thu, 09 Jul 2026 13:13:12 +0000 https://dev.to/muddywoody/i-built-a-tetris-clone-with-9-visual-themes-and-procedurally-synthesized-sound-d3e https://dev.to/muddywoody/i-built-a-tetris-clone-with-9-visual-themes-and-procedurally-synthesized-sound-d3e <p>Every single sound effect happens in real time. </p> <p>TETRIO is at <a href="https://tetrioworld.com" rel="noopener noreferrer">https://tetrioworld.com</a>. No install, no dependencies, open index.html and it runs.</p> <h1> The pitch in one sentence </h1> <p>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.</p> <h1> Tech stack </h1> <p>Zero dependencies. No npm, no CDN, no build step. ES modules, private class fields, requestAnimationFrame.</p> <p>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.</p> <p>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.</p> <h1> Come play </h1> <p><a href="https://tetrioworld.com" rel="noopener noreferrer">https://tetrioworld.com</a>. No signup, no install. Try glass theme with crystal sound. Or wood with metal. The mismatched combos are half the fun.</p> webdev javascript beginners