Case study · Live — Web
Langville
A town that only grows when you actually learn the language.
Langville is a browser game where you learn Mexican Spanish by building a town. Resources only come from right answers, so the town grows exactly as fast as your vocabulary does.
The problem
The common failure in learning games is a quiz bolted in front of the gameplay. Players learn to game the quiz instead of the language, and progress ends up gated by timers or purchases rather than by what they know.
How it works
Gathering spots and buildings around town each pose an exercise drawn from whatever vocabulary is due, in a category that fits the place — the market pulls food and goods words. A right answer earns the resource; a wrong one earns nothing this time, and the word stays in rotation. Resources then pay for new buildings.
Exercises come in seven kinds — multiple choice, fill-in-the-blank in both directions, sentence scramble, dictation, el/la gender checks, and matching — with listening variants, and difficulty climbs per word as you master it.
The world spans real Mexican settlements, from Tlaquepaque to Tenochtitlan and Teotihuacán. With enough mastery and materials, a settlement grows into its historical successor — Tenochtitlan into Mexico City.
Engineering decisions
Exercises must be load-bearing
The governing design rule: every exercise is tied to the game action it gates. XP is weighted by exercise type and tapers as a word is mastered, so farming easy words doesn't pay.
The SRS engine knows nothing about the game
Scheduling lives in its own module — SM-2 with pass/fail grading — that imports nothing from the rest of the codebase. The game calls into it but never contains teaching logic, so each side can change without breaking the other.
Wrong answers aren't a fail state
A miss resets that word's schedule and keeps it in rotation. That's spaced repetition doing its job, and it means there's nothing to buy your way past.
Three.js for the world, the DOM for everything else
The town renders in Three.js with a day/night cycle. Every menu, panel, and exercise card is real HTML and CSS rather than canvas-drawn shapes; the game framework underneath only handles input and timing.
Browser speech, and deliberately no speech recognition
Listening exercises use the browser's built-in speech synthesis with a Mexican Spanish voice. Speech recognition was researched and rejected: support is inconsistent across browsers, some send audio to a remote server, and accuracy drops for learners' accents.
No backend
Progress saves locally per player profile, so a household can share one device, and the game ships as a static site. There's no account to create and no server to run.
Deliberate scope cuts
One language and no combat — ever. If towns ever interact, it will be through trade and diplomacy. Proving the core loop came before widening it.
Stack
- 3D world
- Three.js
- Interface
- HTML/CSS over the canvas
- Language
- TypeScript
- Build & hosting
- Vite, static deploy on Vercel
- Audio
- Web Speech API, Web Audio API
- Testing
- Vitest, Playwright