English Hangman Project Report
1. The Concept
English Hangman is a landscape word-guessing game built for English learners. Players look at a category, tap letters on a QWERTY keyboard, and try to reveal the hidden word before a seven-stage Hangman drawing is complete. The game is designed as a playable notebook-paper prototype: twenty progressive English levels, diamond rewards, a paid hint that reveals a letter, and a result card that shows the definition plus pronunciation. The unique hook is not a new guessing mechanic — it is making classic Hangman feel like a handheld classroom toy: compact HUD, locked/unlocked stages, and a no-scroll 16:9 layout that occupies 80% of the screen.
2. The Stack
The Stack: Vanilla HTML, CSS, and JavaScript. No framework, no build step. The Hangman figure is drawn live on a Canvas 2D context. Progress (level, score, diamonds, unlocks) is stored in localStorage. Sound effects use the Web Audio API. "Hear word" uses the browser Speech Synthesis API. The UI is a single-page app with home, game, pause, settings, how-to-play, diamond exchange, and level-picker overlays. Local preview is served with python -m http.server.
The AI Assist: Cursor was used as a pair-programmer for the 1-day sprint — scaffolding the screen structure, iterating the notebook-paper CSS, wiring game state, and tightening the landscape layout until the HUD, word slots, keyboard, canvas, and hint button all fit without scrolling.
3. The 1 Day Sprint:
Morning (Hours 1–3): Locked the concept and content first: English-only words, twenty categories that grow in difficulty (from LION to BREAKFAST), and a home screen with Play, How to Play, and Settings. Built the HTML shell, notebook background, QWERTY keyboard, letter slots, and the core guess loop — correct letters reveal, wrong letters add a strike, seven mistakes end the round.
Afternoon (Hours 4–6): Turned the prototype into a game. Drew the Hangman figure in seven canvas stages so every miss is visible immediately. Added score, diamonds, the + exchange (100 points → 2 diamonds), a 10-diamond reveal-letter hint, pause/home navigation, win/lose overlays with definition and pronunciation, and a level picker with locked/unlocked stages. Sound and motion toggles went into Settings, with progress saved locally.
The Finish Line (Hour 7-8): Polished the "handheld toy" constraint. Forced a responsive 16:9 shell at 80% of the viewport, clamped type and buttons so nothing overflowed, and added a mobile portrait gate that asks the player to rotate before the game appears. Last pass: correct/wrong key colors, compact HUD, retry/next-level flow, and a reset-progress path so the prototype is demo-ready.
4. The Roadblocks
Roadblocks: The game logic was the easy part. The hard part was packing a full Hangman session into one landscape frame without scroll: category labels of different lengths, a 10-key top row, a canvas drawing that still reads as a gallows, and a HUD that had to stay readable on a phone. The portrait orientation gate also fought desktop vs. mobile media queries — the game had to stay playable on a laptop while still blocking portrait phones. Canvas line weights, clamp() font sizes, and overlay cards all needed several visual passes before they felt like one notebook instead of stacked web panels.
5. Key Takeaways
A complete casual game can ship in one day if the stack stays vanilla and the scope stays one screen. Content (clear English words + definitions) mattered as much as code; without it the loop had nothing to teach. AI sped up layout iteration, but the last 20% — spacing, rotation, and "does this look like a game or a webpage?" — still needed a human eye on a real landscape phone.
My final thought: Hangman is old, but the constraint made it new: if it does not fit in landscape without scrolling, it is not finished.