What You'll Build
- A Hangman game with:
- Multiple word categories to choose from
- Letter guessing via on-screen keyboard and physical keyboard
- An animated stick figure that builds with each wrong guess
- A wrong guess counter with max 6 mistakes allowed
- Win and lose screens with the correct answer revealed
- Score tracking across multiple rounds
Tool: Bolt (no coding needed) Difficulty: Beginner Time: ~20 minutes Coding required: None
Hangman is one of those timeless games everyone knows. You guess letters one at a time, trying to figure out a hidden word before the stick figure is fully drawn. It's simple, satisfying, and perfect for killing a few minutes. You'll build a version with multiple word categories, a visual stick figure that animates as you make mistakes, and polished win/lose screens.
This is a fantastic first vibe coding project. The game logic is straightforward — track guessed letters, check if they're in the word, and draw the figure — but the result looks and feels like a real app. Bolt handles all the logic and UI from your prompt, so you can focus on making it fun.
What You Need
The Founding Prompt
Go to bolt.new and paste this prompt:
Build a Hangman word-guessing game in the browser. Word system: Include at least 50 words across these categories: Animals, Countries, Movies, Food, Sports. At the start of each game, show a category selection screen with 5 buttons (one per category). After picking a category, randomly select a word from that category. Display: Show the hidden word as a row of underscores, one per letter, with spaces between them. When a letter is correctly guessed, reveal it in its position(s). Use a large, bold monospace font for the word display. Stick figure: Draw the hangman on an SVG canvas to the left of the word. Draw body parts one at a time with each wrong guess in this order: 1. Head (circle) 2. Body (vertical line) 3. Left arm (diagonal line) 4. Right arm (diagonal line) 5. Left leg (diagonal line) 6. Right leg (diagonal line) Each part should animate in with a draw-on effect (stroke-dasharray animation). Guessing: Show a full A-Z on-screen keyboard below the word. When a letter is clicked or typed on a physical keyboard: - Correct guess: highlight the key in green, reveal the letter(s) in the word - Wrong guess: highlight the key in red, draw the next body part, increment wrong guess counter - Disable already-guessed keys Game states: - Win: When all letters are revealed, show a green "You Win!" overlay with the completed word and a "Play Again" button. - Lose: After 6 wrong guesses (full stick figure), show a red "Game Over" overlay, reveal the correct word, and show a "Try Again" button. Scoring: Track wins and losses across rounds. Show "Wins: X | Losses: Y" at the top of the screen. Also track current win streak. UI: Clean white background with a centered layout. Use a playful sans-serif font. The hangman drawing area should be on the left, the word and keyboard on the right on desktop, and stacked vertically on mobile. Mobile friendly: On-screen keyboard keys should be at least 40px wide for easy tapping. The layout should stack vertically on screens under 768px.
Click Generate and wait for Bolt to build your game.
Step 1: Test the Core Game
Open the preview and select a category. Start guessing letters by clicking the on-screen keyboard or typing on your physical keyboard. Check that correct letters appear in the word, wrong guesses draw body parts, and the game correctly detects wins and losses.
Step 2: Expand the Word List and Add Hints
More words and optional hints make the game more replayable and accessible.
Expand the word list to at least 100 words total (20+ per category). Add a "Hint" button below the word display. When clicked, show a one-sentence clue for the current word (e.g., for "ELEPHANT" in Animals, the hint might be "The largest land animal"). The hint button can only be used once per round, and using it should add one body part to the stick figure as a penalty. Dim the hint button after it's been used.
Step 3: Improve the Stick Figure Animation
The hangman drawing should look good and animate smoothly to make wrong guesses feel impactful.
Improve the stick figure drawing. Add a gallows structure (base, vertical pole, horizontal beam, and rope) that's always visible as a static gray outline. Draw body parts in black with a 3px stroke width. Add a sad face (two dot eyes and a frown arc) to the head on the final wrong guess. Each body part should animate in over 400ms with a smooth stroke-dasharray reveal. Add a slight swing animation to the completed figure on game over — the body should sway left and right gently.
Step 4: Add Visual Polish and Feedback
Small touches make the game feel professional and satisfying.
Add visual improvements. When a correct letter is revealed, animate it dropping into place from above with a bounce. When a wrong letter is guessed, briefly flash the screen border red. On a win, show a confetti animation. On game over, tint the background slightly red. Add a smooth fade transition between the category selection screen and the game screen. Style the category buttons as large colorful cards with an icon for each category (paw for Animals, globe for Countries, film for Movies, fork-and-knife for Food, trophy for Sports) using emoji.
Step 5: Add Sound Effects
Audio feedback makes each guess feel more exciting.
Add sound effects using the Web Audio API. Play a cheerful "ding" when a correct letter is revealed. Play a low "buzz" when a wrong letter is guessed. Play a descending three-note tone when a body part is drawn. Play a victory fanfare (ascending notes) on a win. Play a game-over sound (descending notes) on a loss. Add a subtle click sound when pressing any keyboard key. Include a speaker icon in the top-right to mute/unmute all sounds.
Step 6: Make It Fully Mobile Friendly
The game needs to work perfectly on phones where the on-screen keyboard is the only input method.
Optimize the mobile layout. On screens under 768px, stack the hangman drawing above the word display and keyboard vertically. The on-screen keyboard should use 3 rows matching a QWERTY layout (QWERTYUIOP, ASDFGHJKL, ZXCVBNM). Keys should be at least 36px tall with 4px gaps. The hangman SVG should scale to 200px height on mobile. Add a slight vibration (navigator.vibrate(50)) on wrong guesses for devices that support it. Make sure nothing requires scrolling — the entire game should fit on one screen.
Step 7: Deploy and Share
Click the Deploy button in Bolt to publish your game. You'll get a live URL instantly. Share it with friends and challenge them to guess the words — Hangman is a great game to play during breaks.
Level Up Your Game
Try these follow-up prompts to make your game even better:
Add difficulty levels:
Add a difficulty toggle on the category screen: Easy (words under 5 letters, 8 wrong guesses allowed), Medium (default 6 wrong guesses), Hard (words 8+ letters, only 5 wrong guesses allowed, no hint available). Show the difficulty badge on the win/lose screen.
Add a timer:
Add an optional timed mode. When enabled, show a 60-second countdown timer above the word. If time runs out, it counts as a loss. Flash the timer red when under 10 seconds. Award bonus points for finishing with time remaining: 1 point per second left.
Add animations:
Add a letter-flip animation when revealing correct guesses — the underscore should flip like a card to show the letter. Add a wobble animation to wrong keyboard keys when pressed. The gallows should cast a subtle shadow that sways slightly. Add a typewriter-style animation when the word is revealed on game over.
Add high score saving:
Track these stats in localStorage: total games played, wins, losses, win percentage, longest win streak, and best streak per category. Show a "Stats" button on the main screen that opens a modal with all statistics displayed in a clean table. Add a "Reset Stats" button with a confirmation prompt.
Add a custom word mode:
Add a "Custom Word" option on the category screen. One player types a secret word and an optional hint (the screen shows a text input and the keyboard is hidden). After submitting, hand the device to the other player to guess. Hide the input field and show the game as normal. This mode doesn't count toward stats.
Want persistent high scores? Follow our leaderboard guide to connect your game to a database.
Common Errors
Blank screen after prompt If Bolt generates a blank screen, add to your prompt: "Make sure the game renders immediately on page load with no user setup required."
Game not responding to keyboard Add to your prompt: "Ensure keyboard event listeners are attached to the document, not a specific element. Auto-focus the game container on load."
Mobile touch controls not working Add to your prompt: "Add touch event handlers for mobile. Include visible on-screen buttons for all controls on screens under 768px wide."