A fast-paced arcade browser game — rotate a colorful ring to catch falling orbs, build streaks, collect power-ups, and compete in Daily Challenge mode. No installs. Just play.
🎯 Play Now on GitHub Pages · 🐛 Report Bug · 💡 Request Feature
- About
-
- Features
-
- Controls
-
- Scoring System
-
- Tech Stack
-
- Getting Started
-
- Project Structure
-
- Testing & Quality
-
- Roadmap
-
- License
- 🎯 Addictive Gameplay — Rotate the ring to match falling orbs to the correct color sector
- 💫 Progressive Difficulty — Faster drops, more colors, shorter spawn intervals as you level up
- ⚡ Power-Ups — Catch slow-motion orbs to buy yourself precious reaction time
- 🏆 Daily Challenge — Same seeded orb sequence for every player worldwide (resets at midnight UTC)
- 🔁 Endless Mode — Chase your personal best with randomized drops
- 🔊 Spatial Audio — Dynamic sound effects via Web Audio API (no external assets)
- 💾 Persistent Scores — Best scores saved to LocalStorage
-
📱 PWA Ready — Installable with offline support via Service Worker
- ♿ Accessible — Full keyboard navigation, screen reader announcements, reduced motion toggle
-
Global leaderboard (Daily Challenge)
-
- [ ] Additional power-up types
-
- [ ] Custom color themes / skins
-
- [ ] Haptic feedback on mobile
-
- [ ] Replay system for top scores
-
---
-
## 🤝 Contributing
-
1. Fork the repo
-
2. Create a branch:
git checkout -b feature/your-idea -
3. Run
npm testandnpm run formatbefore committing -
4. Open a Pull Request with a clear description
-
---
-
## 📄 License & Contact
-
Released under the MIT License.
-
Made with 💜 by Vardhan · vardhana1209@gmail.com · github.com/grammerpro
Chroma Loop is a pure browser arcade game built with TypeScript and the Canvas API. No game engine. No framework. Just clean, typed game logic rendered at 60fps. It features two modes — Endless and Daily Challenge — where all players worldwide compete on the same deterministic seeded sequence every day.
Input Action Mouse / Touch Drag to rotate ring directly Arrow Keys ← → Rotate left / right A / D Alternative rotation keys P / Escape Pause / resume Enter / Space Resume from pause or navigate menus
Event Points Base catch 120 pts Streak multiplier +25% per streak level (max ×12) Power-up catch +260 pts Miss −1 life (3 lives total) Level advances every 8 catches, increasing difficulty.
Technology Purpose TypeScript Type-safe game logic and state Canvas API Hardware-accelerated 2D rendering Web Audio API Dynamic sound synthesis Vite Dev server and production builds Vitest Unit testing with jsdom LocalStorage Persistent scores and preferences Service Worker Offline PWA support
git clone https://github.com/grammerpro/Chroma-Loop.git cd Chroma-Loop npm install npm run devOpen http://localhost:5173. The game hot-reloads as you edit source files.
Production build:
npm run build # Outputs to dist/ npm run preview # Preview locally before deploy
Deploys automatically to GitHub Pages via GitHub Actions on every push to
main.
Chroma-Loop/ ├── src/ │ ├── main.ts # Entry point, game initialization │ ├── game.ts # Core game loop and state machine │ ├── ring.ts # Ring geometry, rotation, collision │ ├── drop.ts # Falling orb entity │ ├── input.ts # Unified keyboard/mouse/touch input │ ├── ui.ts # DOM overlays, HUD, menus │ ├── audio.ts # Web Audio sound synthesis │ ├── storage.ts # LocalStorage wrapper │ └── rng.ts # Seeded RNG for Daily Challenge ├── tests/ # Vitest unit tests ├── public/ # Static assets, PWA manifest └── index.html
npm run test # Run all Vitest tests npm run test:watch # Watch mode npm run lint # ESLint npm run format # Prettier npm run type-check # TypeScript strict check
CI/CD: GitHub Actions runs lint + type-check + tests on every push, then deploys to GitHub Pages on success.