An AI Vibe Coding showcase: a snake game in Vanilla JS (ES Modules), Canvas 2D, and Web Audio. No bundler, no framework. ~7,000 lines, mostly AI-written with human direction.
This repository is a demonstration project for AI-assisted development under real product constraints: 22-language i18n, PWA offline support, keyboard accessibility, synthesized audio, and a proper game state machine.
- 3 game modes: Classic Infinite, Level Challenge (collect targets to advance), Time Attack (60-second sprint).
- Items include food (Roach, Ant, Mosquito, Egg, Mouse), trash (score penalty), and poison (shrink or game over).
- AI autopilot using A*, BFS, or Greedy pathfinding: watch it play or let it guide you.
- 4 map templates (Empty, Cross Wall, Pillars, Maze), plus toggleable wall wrapping.
- 4 snake skins (Neon Coil, Quantum Ribbon, Chrome Warden, Void Pulse), each with its own breathing animation.
- Death sequence:
DYINGโGAME_OVERwith screen shake, snake flash, and audio ducking. +10/-3text particles float up from items on pickup. Burst particles on eat and other events.- All SFX synthesized via Web Audio API, with no audio files. Music pitch, tempo, and combo intensity react to snake length and speed.
- Snake head pulses before first move so you know it's waiting for input.
- Smooth CSS transitions between screens.
-
22-locale i18n with runtime switching. HTML
lang/dirupdates automatically for RTL.All supported locales
ar-SAbn-BDde-DEen-USes-ESfa-IRfr-FRhi-INid-IDit-ITja-JPko-KRnl-NLpl-PLpt-BRru-RUth-THtr-TRur-PKvi-VNzh-CNzh-TW -
PWA with service worker that pre-caches all core assets and locale files.
-
Accessible overlays:
inertfocus trap + auto-focus on modal open;role="application"on canvas with ARIA labels. -
Init-failure screen with localized error message and retry button.
-
HUD buttons show inline keyboard hints (Esc, R, L, Enter, A).
-
Mobile: on-screen D-pad with touch-hold auto-repeat;
touch-actionscoped to interactive zones. -
Type-checked with JSDoc +
tsc, with no TypeScript compilation step. -
Built and iterated as an AI Vibe Coding demo using small diffs and review-driven refinement.
This project is intentionally positioned as an AI Vibe Coding demonstration. I wanted to see how far AI-assisted development could go beyond a throwaway demo. The architecture decisions (state machine design, module boundaries, no build tools) are mine; the implementation is mostly AI-generated, reviewed and revised by a human.
The workflow uses small diffs, each reviewed, sometimes by other AI models too. Localization, accessibility, offline support, and error handling were built in from the start, not bolted on after the fact.
The result is ~7k lines of vanilla ES modules. Clear separation between core logic, rendering, AI, input, audio, and i18n, with no framework layer to dig through.
- Add a new skin: Implement
_drawYourSkin(snake, alpha)inrenderer.js, add an entry to the skin selector inpanel-manager.js. - Add a new item type: Define it in
config.jsItemDefs, hook it up initem-manager.jsandgame.js. - Add a new locale: Create
i18n/xx-XX.json(copyen-US.json), add toi18n/index.json, updatesw.jsCORE_ASSETS. - Run
npm run checkto verify nothing broke.
ES Modules require a server, so you can't just open index.html directly.
- Clone the repository.
- Run
npx serve .(or use VS Code's Live Server extension). - Open
http://localhost:3000.
| Action | Keyboard | Mobile |
|---|---|---|
| Move | โ โ โ โ / W A S D (AZERTY: Z / Q) | On-screen D-Pad |
| Boost (hold same direction) | Hold Space | Hold D-Pad button |
| Start (Title Screen) | Enter | Start Button |
| About (Title/About Screen) | A | About Button |
| Pause / Resume | Esc | Pause Button |
| Restart | R (Shift+R randomize) | Restart Button |
| Toggle Legend | L | Legend Button |
| Toggle AI | I | (Panel Setting) |
| Toggle AI Path Display | P | (Panel Setting) |
.
โโโ index.html # Entry point and DOM structure
โโโ scripts/
โ โโโ core/ # Game logic (Grid, Snake, GameLoop, StateMachine)
โ โโโ render/ # Canvas rendering, Particles, TextParticles
โ โโโ ai/ # A*, BFS, Greedy pathfinding
โ โโโ audio/ # Web Audio API engine (synthesized SFX + music)
โ โโโ input/ # Keyboard/touch/D-pad input handling
โ โโโ i18n/ # Runtime localization loader
โ โโโ ui/ # lil-gui panel & HUD management
โ โโโ maps/ # Map template generator
โ โโโ utils/ # DOM helpers, keyboard-shortcut guard, MinHeap
โ โโโ tests/ # Node-based smoke tests (core logic)
โ โโโ tools/ # i18n consistency checker
โโโ styles/ # CSS
โโโ i18n/ # Localization files (22 locales; see i18n/index.json)
โโโ sw.js # Service worker for offline caching
cloc --exclude-dir=node_modules,assets,.git,.github --not-match-f='package-lock\.json$' --timeout=1000 --by-file-by-lang .
- Scope: project source and docs, excluding
node_modules,package-lock.json,assets,.git, and.github - Snapshot date:
2026-08-09 60files scanned15,298total lines:13,200lines of code1,417blank lines681comment lines
- Language distribution:
- JavaScript:
27files /7,312code lines - JSON:
26files /4,315code lines - CSS:
1file /892code lines - Markdown:
2files /260code lines - HTML:
1file /367code lines - TypeScript:
1file /42code lines - XML:
1file /9code lines - Text:
1file /3code lines
- JavaScript:
- Node: Requires Node.js v20+ for linting tools
- Install Dev Deps:
npm install - I18n Check:
npm run check:i18n - Type Check:
npm run check:js - Core Tests:
npm run test:core - Lint:
npm run lint - Markdown Lint:
npm run lint:md - Format Check:
npm run format:check - Format Write:
npm run format - Lint + Format Quality Check:
npm run check:quality(opt-in during migration) - Lint Auto Fix:
npm run lint:fix - All Checks:
npm run check - Note: Node scripts run as ESM (
type: "module"inpackage.json)
GNU General Public License v3.0 or later (GPL-3.0+)