Beat.pe is a web-based rhythm game built with vanilla JS. Hit the columns when they light up, build combos for score multipliers, and see how far you can go against an ML-powered difficulty system that adapts to your skill.
- 4-column gameplay — press
ASDFor tap on mobile - Combo system — chain hits for 2×, 3×, 4× score multipliers
- ML difficulty — adaptive algorithm adjusts speed based on your accuracy, reaction time, and combo streaks
- Sound & VFX — synthesized audio (Web Audio API) and particle effects, both toggleable
- Settings — customizable key bindings (desktop), sound/VFX toggles, persisted in localStorage
- Leaderboard — top 10 scores with dates, stored locally
- Pause — press Space mid-game or open Settings/Leaderboard
- Responsive — works on desktop, tablet, and phone
- Press Space (or tap Start on mobile) to begin
- Hit the matching column when it lights up — timing is everything
- Build combos for higher score multipliers
- A miss costs a life and resets your combo
- Game ends at 0 lives
| Layer | Tech |
|---|---|
| Bundler | Vite |
| Language | Vanilla JS (ES Modules) |
| Styling | Vanilla CSS |
| Audio | Web Audio API |
| ML | Custom adaptive difficulty algorithm |
| Storage | localStorage |
Beat.pe/
├── index.html # Single-page entry
├── assets/ # Fonts, favicon, header GIF
├── src/
│ ├── main.js # Entry point
│ ├── style.css # All styles
│ ├── core/
│ │ ├── Game.js # Game loop, state, pause/resume
│ │ └── Input.js # Keyboard + touch input
│ ├── ui/
│ │ ├── UIManager.js # DOM updates, HUD, overlays
│ │ ├── SettingsManager.js # localStorage persistence
│ │ ├── SettingsUI.js # Settings modal
│ │ └── LeaderboardUI.js # Leaderboard modal
│ ├── systems/
│ │ ├── AudioSystem.js # Synthesized sound effects
│ │ └── VfxSystem.js # Particle effects
│ └── ml/
│ └── DifficultyManager.js # Adaptive difficulty
├── package.json
└── vite.config.js
pnpm install
pnpm dev # http://localhost:5173
pnpm build # outputs to dist/
pnpm preview # preview production buildHosted on GitHub Pages — Play Live