A synthwave-inspired WebGL block-catching game that will test your reflexes and captivate your senses.
Fast • Accessible • Beautiful • Tested
Time is ticking. Neon blocks cascade from the digital sky. Your mission? Catch them all.
In this retro-futuristic arena, you control a sleek white paddle in a race against time. Each block type demands different strategies:
- 🌸 Pink Blocks → 1 point • Large & leisurely • Perfect for beginners
- 🟣 Purple Blocks → 5 points • Medium challenge • The sweet spot
- 🔷 Cyan Blocks → 25 points • Lightning fast • High risk, high reward
Goal: Score 500 points in 60 seconds. Sounds easy? Think again.
- Synthwave aesthetics with neon colors and retro vibes
- Smooth WebGL rendering at 60fps
- Responsive design that works on any screen
- Dynamic sound effects powered by Web Audio API
- Pitch-shifted audio based on block types and scores
- Spatial audio that responds to your performance
- Full ARIA support for screen readers
- Keyboard navigation throughout the entire interface
- Focus management that never leaves you lost
- High contrast modes for visual accessibility
- TypeScript for type safety and developer experience
- Object pooling for smooth performance
- Comprehensive testing with 141 test cases
- Modern build system powered by Bun
← → Arrow Keys Move your paddle
SPACE Start game / Pause
Audio Button Toggle sound
- Start with pink blocks to build momentum
- Chase cyan blocks when you're confident
- Watch the timer - panic leads to mistakes
- Use audio cues to anticipate block drops
# Get the code
git clone https://github.com/zerebos/BlockCatcher.git
cd BlockCatcher
# Install & run (requires Bun)
bun install
bun devbun dev # Development server
bun run prod # Production build
bun test # Run test suite
bun run lint # Code quality checksrc/
├── managers/ # System orchestration (audio, DOM, input, rendering, pools)
├── entities/ # Game objects (player, blocks) with behavior
├── utils/ # Pure functions (math, geometry, vectors)
├── audio/ # Modular sound effect system
├── types/ # TypeScript definitions
└── styles/ # Synthwave CSS architecture
- Unit tests for individual components
- Integration tests for game mechanics
- DOM tests using Happy-DOM for realistic environments
- Edge case coverage including accessibility scenarios
- Object pooling prevents garbage collection hitches
- Efficient collision detection using AABB algorithms
- Minimal DOM manipulation with batch updates
- Optimized bundle under 20KB total
| Metric | Value |
|---|---|
| Bundle Size | 18.81 KB (JS) + 13.40 KB (CSS) |
| Test Coverage | 141 tests, 100% core functionality |
| Performance | 60 FPS WebGL rendering |
| Accessibility | WCAG 2.1 AA compliant |
| Browser Support | All modern browsers with WebGL |
Why these choices?
- Bun → Lightning-fast runtime and bundler
- TypeScript → Type safety without complexity
- WebGL → Hardware-accelerated graphics
- Web Audio API → Immersive sound design
- Happy-DOM → Realistic testing environment
- GitHub Actions → Automated deployment
Love the game? Here's how to make it even better:
- 🐛 Report bugs with detailed reproduction steps
- 💡 Suggest features that align with the synthwave aesthetic
- 🧪 Add tests for edge cases you discover
- ♿ Improve accessibility - there's always more to do
- 🎨 Enhance visuals with new effects or animations
- Write tests for new features
- Maintain TypeScript strict mode compliance
- Follow the existing code style (ESLint configured)
- Ensure accessibility standards are met
Apache 2.0 - Build upon it, learn from it, make it your own.
Built with ❤️ using modern web technologies