How to Build a Drawing Guessing Game with Lovable

Build a two-player drawing and guessing game that runs in the browser on one device.

Game flow: Player 1 sees a secret word and draws it on a canvas. Player 2 watches and tries to guess. After the round, players switch roles.

Drawing canvas: Full-width canvas element with these tools in a toolbar above it:
- Color picker with 12 preset colors (black, red, blue, green, yellow, orange, purple, pink, brown, gray, white, cyan) plus a custom color input
- 3 brush sizes (small, medium, large) shown as circles
- An eraser tool
- A clear canvas button
- An undo button (undo last stroke)

Word system: Include a list of at least 60 words across categories: Animals, Food, Objects, Actions, Places. At the start of each round, show the drawer 3 random words and let them pick one.

Timer: Each round has a 60-second countdown timer displayed prominently. When time runs out, reveal the word and let the guesser mark whether they got it right or not.

Scoring: 10 points for a correct guess. Track scores for both Player 1 and Player 2 across rounds. Play 10 rounds total (5 per player), then show a final scoreboard.

UI: Bright, playful design with rounded corners and a fun sans-serif font. Show the current round number, whose turn it is to draw, and both player scores at the top. The secret word should only be visible to the drawer (show it above the canvas with a "Don't let them see!" label). Include a "Show Word" screen between turns so the non-drawer can look away.

Make it mobile friendly with touch drawing support.

Expand the word list to 100 words with at least 20 per category. Add two new categories: "Movies" and "Sports". On the word selection screen, show the 3 word options as large cards with the category label above each word. Add a "Shuffle" button that re-rolls the 3 options once per round. After picking a word, animate the cards away and transition smoothly to the drawing screen.

Add a guess input field below the canvas for Player 2. The guesser can type guesses and press Enter to submit. If the guess matches the secret word (case-insensitive), immediately show a "Correct!" celebration with confetti animation and award points. Award bonus points for faster guesses: 10 points if guessed in the first 20 seconds, 7 points in the next 20 seconds, 5 points in the last 20 seconds. Show each wrong guess in a list below the input so the guesser doesn't repeat themselves.

Between turns, show a full-screen handoff screen that says "Pass the device to [Player Name]". Require the new drawer to tap a "I'm Ready" button before showing the word selection. Add a 3-second countdown ("3... 2... 1... Draw!") before the timer starts. Add a subtle screen flash animation on the transition. Let players enter their names at the start of the game instead of just "Player 1" and "Player 2".

Add sound effects to the game. Play a pop sound when selecting a color or brush size. Play a tick sound every second during the last 10 seconds of the timer. Play a buzzer sound when time runs out. Play a cheerful ding when the guesser gets the answer right. Play a short fanfare on the final scoreboard screen. Add a mute/unmute button in the top-right corner. Use the Web Audio API to generate simple tones instead of loading audio files.

Optimize the game for mobile devices. The canvas should fill the full width of the screen on mobile. The color picker should become a horizontally scrollable strip. Brush size buttons should be at least 44px tap targets. The guess input should stay visible above the keyboard when typing. Lock the screen to portrait orientation if possible. Add touch drawing support with pressure sensitivity if available. Make the toolbar sticky at the top so it doesn't scroll away.

Add a difficulty setting at the start: Easy (simple words like "cat" and "house", 90 second timer), Medium (default, 60 seconds), and Hard (complex words like "electricity" and "democracy", 45 seconds). Show the difficulty level on the scoreboard.

Add a visual timer bar that shrinks across the top of the canvas as time runs out. Change the bar color from green to yellow at 30 seconds, and yellow to red at 10 seconds. Add a pulsing animation to the timer when under 10 seconds.

Add a drawing sparkle trail that follows the brush for 200ms as the player draws. Add a bounce animation when a correct guess is submitted. Add a shake animation on wrong guesses. Animate the score counter incrementing with a rolling number effect.

Save the top 5 game results to localStorage with player names, scores, and date. Show a "Hall of Fame" button on the start screen that displays past results in a leaderboard table. Highlight if the current game beats a previous record.

After 30 seconds, automatically reveal the first letter of the word as a hint below the canvas. After 45 seconds, reveal the word length. Show hints with a lightbulb icon and a subtle glow animation. Deduct 2 points from the guess score for each hint that was shown.