Play on your desktop. Steer with your phone. Scan a QR code and your phone becomes a wireless, analog joystick.
- Host — open the demo on a computer. A glowing QR code + 6-digit code appears.
- Connect — scan the QR with your phone camera (or type the code). It auto-connects — no app, no install.
- Play — tap ▶ to start, then tilt the joystick to steer. Push further to go faster.
The snake never stops — you steer it at any angle (not just up/down/left/right), and speed scales with how far you push the stick. Eat food quickly to build a 🔥 combo (up to ×6) before the streak timer drains.
- 📱 Phone-as-controller — a custom touch joystick streamed to the desktop in near real-time over Firebase.
- 🎯 Analog, continuous-angle movement — steer by angle; magnitude controls speed. No grid-snapping.
- 🔥 Combo streaks — chain quick eats for a score multiplier, shown as a draining yellow timer badge.
- 🎆 Juice — particle bursts, ripples, floating score pops, and screen shake on impact.
- 🔊 Synthesized sound — Web Audio SFX whose pitch climbs with your combo; one-tap mute.
- 🤳 Flex your score — share to WhatsApp, X, Facebook, or Instagram straight from your phone.
- ⚡ Offline-ready PWA — installable, with a network-first service worker.
- 🛟 Single-device fallback — a
localStoragemode kicks in automatically when Firebase isn't available. - 📊 Audience analytics — Google Analytics 4 for audience + campaign insight, tagged desktop-host vs. phone-controller. IP-anonymized, and it never blocks gameplay.
| Control | Action |
|---|---|
| 🕹️ Joystick | Rotate to steer (any angle) · push further to speed up |
| ▶ Center button | Start the game (turns into 🐍 while playing) |
| ⌨️ Space / Enter (desktop) | Restart after a crash |
| 🔁 Play Again (phone) | Restart from the game-over share card |
Vanilla JavaScript (no bundler, no modules) · HTML5 Canvas · Firebase Firestore (session + game state) + Realtime Database (joystick stream) + Analytics (GA4) · PWA (installable, offline shell) · Firebase Hosting with auto-deploy via GitHub Actions.
There's no build step — just serve the static public/ folder.
npm install # dev tooling only: firebase-tools, eslint, vitest, prettier
npm start # → npx serve -s public (http://localhost:3000)Any static server works too, e.g. python -m http.server 8000 --directory public.
- Open on a desktop-width window to host the game.
- Append
?session=123456to the URL (or open on a phone) to load the controller view in a second tab/device.
npm run lint # ESLint
npm test # Vitest unit tests (tests/)
npm run format # PrettierDeploys are automatic on push to master (GitHub Actions → firebase deploy --only hosting). Database/Firestore rules are not shipped by CI.
Plain <script> files share one global scope, loaded in a fixed order — there's no import graph. The desktop owns the game loop, rendering, and collision; the phone captures the joystick. They pair over a 6-digit code / QR via Firebase, with a localStorage fallback for single-device use.
🤖 Full map for contributors and AI agents lives in CLAUDE.md, with a deeper index under
.agent/.
PRs welcome — see CONTRIBUTING.md. We use Conventional Commits (feat | fix | refactor | style) and branch as feature/…, bugfix/…, docs/….
Made with ❤️ by Aryaman Godara · ⭐ the repo if you enjoyed it!