Complete User Guide
Last Updated: January 2025
Welcome to Picture Puzzle! This comprehensive guide contains all 1,252 lines of content from the complete documentation.
Picture Puzzle is a jigsaw puzzle game where you rearrange scrambled pieces of an image to recreate the original picture. It's like a traditional jigsaw puzzle, but digital!
index.html file in your web browser (Chrome, Firefox, Safari, or Edge)Before you start your first game, you'll see a friendly welcome screen in the game area:
This welcome screen disappears as soon as you click "New Game" and is replaced by your puzzle!
When you open the app for the first time, you'll see a tutorial popup that explains:
Tip: You can always refer back to this guide if you forget anything!
Quick Close Tip: ALL popup windows (tutorial, victory, confirmations) can be closed by clicking the dark background overlay outside the popup box!
The app has four main sections:
This is where you set up your game:
Shows your current game stats:
This is where the puzzle appears. When you start a game, you'll see the scrambled puzzle pieces here.
Displays your best completion times:
Follow these simple steps:
Click the "Difficulty" dropdown and select:
Note: Start with Easy if you're new to puzzles!
Click the "Puzzle Image" dropdown and select:
Click the big "🎮 New Game" button. The puzzle will:
Now you're ready to solve the puzzle!
The goal is simple: Put all puzzle pieces in their correct positions.
Tip: Pieces grow slightly when you hover over them, making them easy to see!
Tip: Press Escape to cancel a selection without swapping!
When you place a piece in its correct position:
Note: Pieces can still be moved even after they're in the correct position, so be careful!
Pieces change appearance to show their state. Here's what each color and effect means:
| Visual Effect | What It Means | When You'll See It |
|---|---|---|
| Blue outline | Focused via keyboard | When using Tab or Arrow keys |
| Pink outline (3px) | Selected for swapping | After pressing Space/Enter or tapping on mobile |
| Green glowing border | In correct position | When piece is in its proper spot |
| Piece grows slightly | Hovering with mouse | When cursor is over a piece (desktop only) |
| Semi-transparent (50%) | Being dragged | While dragging with mouse (desktop) |
| Semi-transparent (70%) + larger | Touch drag in progress | While touch-dragging on mobile |
| Glow + pulse animation | Correct placement achieved | Immediately when piece lands in correct spot |
| Green flash (3 times) | Hint given | When Hint button shows this piece |
Tip: Pay attention to the green borders—they tell you which pieces you've solved correctly!
What it does: Starts a new puzzle with your current difficulty and image settings.
Important: If you have a game in progress, it will ask for confirmation before starting a new game.
What it does: Continues a previously saved game from where you left off.
When you'll see it: This button only appears if you have a saved game. It shows up when you:
How it works: Click it and your puzzle, timer, moves, and hints will all be restored exactly as you left them.
Tip: The app automatically saves your game when you pause or close the browser!
What it does: Pauses the timer and hides the puzzle.
To resume: Click the button again (it now says "Resume"). Timer continues from where it stopped.
Tip: Use this when you need to step away but want to continue later!
What it does: Shows you up to 3 pieces that are in their correct positions by making them flash with a green glow.
How many hints: You get 3 hints per game.
After using all hints: The Hint button becomes disabled (grayed out).
Strategy Tip: Save hints for when you're truly stuck. Try to solve as much as possible without them for a better challenge!
What it does: Reverses your last piece swap.
Note: Each undo removes one move from your counter, so it doesn't penalize you for mistakes!
What it does: Shows a small image of the completed puzzle in the bottom-right corner of your screen.
Tip: Use Preview frequently! It's not cheating—it's how real jigsaw puzzles work. You can always look at the box!
What it does: Lets you use your own photos as puzzle images.
See the detailed guide below: Uploading Custom Images
The stats panel shows four important numbers that update in real-time as you play:
Shows: How long you've been working on the current puzzle
Why it matters: Your final time is recorded in the High Scores. Faster times rank higher!
Marathon Sessions: The timer can track games longer than an hour, though most puzzles take under 20 minutes!
Shows: Total number of piece swaps you've made
Why it matters: Fewer moves mean you're more efficient. Your move count is displayed with your high score.
Shows: Percentage of pieces in their correct positions (0% to 100%)
Why it matters: Helps you see how close you are to finishing. Very motivating to watch it climb!
Tip: If your progress is stuck at a certain percentage, you might need to rethink your approach!
Shows: Number of hints used out of the maximum available (X/3)
Why it matters: Shows in your high score. Solving without hints is more impressive!
Want to solve puzzles with your own photos? Here's how!
Problem: "Image too large. Please use an image under 5MB"
Solution: Resize or compress your image using an image editor before uploading
Problem: "Please select a valid image file"
Solution: Make sure you're selecting an actual image file (not a document or video)
Problem: "Storage full - image loaded for this session only"
What it means: Your browser's storage is full, so the image can't be saved permanently
What happens: The image will work for this session but won't be saved for next time
Solution: Clear your browser's storage or use a smaller image
Problem: "Error loading image. Please try another file."
Solution: The image file might be corrupted. Try a different image
Pro Tip: Try using family photos, vacation pictures, or photos of your pets. Familiar images are easier to solve because you know what they should look like!
The app automatically saves your progress so you never lose your work!
Your game is saved in these situations:
When your game is saved, these details are stored:
Your saved game is automatically deleted when:
Note: Saved games are stored in your browser's local storage. This means:
- They're specific to each browser (Chrome save ≠ Firefox save)
- They're specific to each device (Computer save ≠ Phone save)
- They persist even after restarting your computer
Tip: If you need to keep a game for a long time, just leave the browser tab open or make sure you pause before closing!
You did it! Here's what happens when you solve the puzzle.
The moment you place the final piece in its correct position:
A popup shows your completion statistics
The victory screen shows:
1. 🎮 Play Again
2. 📤 Share Score
Shares your achievement with friends and family
Example text: "I completed a medium Picture Puzzle in 02:45 with 87 moves! Can you beat my score?"
How sharing works (3-level fallback system):
3. Close
Your completion is automatically:
Congratulations! Every completed puzzle is an achievement. Whether it took 2 minutes or 20 minutes, you solved it!
Want to improve?
- Try the same puzzle again for a faster time
- Move up to the next difficulty level
- Challenge yourself to use fewer hints
- See if you can solve it in fewer moves
Track your best performances and compete with yourself!
Located at the bottom of the page, this section shows your top 20 fastest completion times.
Use the filter buttons to view specific difficulties:
Tip: This is useful for tracking improvement in a specific difficulty!
Scores are sorted by time only (fastest to slowest).
If two scores have the same time, the more recent one appears first
After completing a puzzle, your newest score:
The app keeps your top 20 fastest times across all difficulties.
Goal: Try to fill all 20 slots with impressive times!
If you want to start fresh:
Warning: This action cannot be undone! Make sure you really want to clear everything.
Become a puzzle master with these helpful strategies!
The app uses a smart "solvable shuffle" algorithm:
Myth Buster: Unlike some puzzle apps, this one mathematically guarantees solvability. If you can't solve it, it's because you haven't found the solution yet—not because it's impossible!
Preview Button Strategy:
Hint Button Strategy:
Undo Button Strategy:
Pause Button Strategy:
Want to beat your high scores? Try these:
❌ Random swapping
Moving pieces without a plan wastes moves
✅ Targeted swaps
Always have a reason for each swap
❌ Ignoring correct pieces
Accidentally moving already-correct pieces
✅ Leave correct pieces alone
They have green borders for a reason
❌ Not using Preview
Trying to remember what the image looks like
✅ Keep Preview open
It's there to help!
❌ Rushing
Making careless mistakes
✅ Think before swapping
A few seconds of planning saves time
Master the keyboard controls for expert-level play!
| Key | Action |
|---|---|
Tab |
Select next puzzle piece (cycles through all pieces) |
Arrow Keys (↑ ↓ ← →) |
Move selection to adjacent pieces (up, down, left, right) |
Space or Enter |
Select current piece for swapping (pink outline appears) |
Escape |
Cancel piece selection (removes pink outline) OR pause/unpause game (if no piece selected) |
To swap two pieces using only keyboard:
To cancel without swapping:
Try completing an entire puzzle without using the mouse!
Pro Tip: Keyboard users often have faster times because there's no mouse movement delay!
Having issues? Here are solutions to common problems.
Solution:
What it means:
Solution:
Solution checklist:
Possible causes:
1. Incognito/Private browsing mode
• Private browsing doesn't save data
• Solution: Use regular browsing mode
2. Browser settings
• Your browser might block local storage
• Solution: Check browser settings → Privacy → Allow sites to save data
3. Completed the puzzle
• Saves are automatically deleted when you win
• This is normal behavior
4. Started a new game
• New games overwrite previous saves
• This is normal behavior
Solution:
Solution:
Solution:
Automatic Resize Feature:
Solution:
Solution:
This is normal when:
Solution:
Fully supported browsers:
If using an older browser:
If none of these solutions work:
1. Try these steps:
2. Browser Console Check:
The app shows brief notification messages in the top-right corner of your screen. These messages automatically disappear after 3 seconds.
Complete list of all notifications you might see:
| Message | When It Appears |
|---|---|
| "Game resumed!" | When you resume a saved game |
| "Please select a valid image file" | When you try to upload a non-image file |
| "Image too large. Please use an image under 5MB" | When uploaded image exceeds size limit |
| "Storage full - image loaded for this session only" | When browser storage is full (image works but won't be saved) |
| "[filename] loaded successfully!" | When custom image uploads successfully |
| "Error loading image. Please try another file." | When uploaded image file is corrupted |
| "Error reading file. Please try again." | When file read operation fails |
| "No hints remaining!" | When you click Hint button after using all 3 hints |
| "Puzzle already solved!" | When you click Hint button on a completed puzzle |
| "Hint used! (X remaining)" | After using a hint (shows how many remain) |
| "Move undone" | After clicking the Undo button |
| "High scores cleared!" | After confirming to clear all high scores |
| "Score shared!" | After successfully sharing via mobile share menu |
| "Score copied to clipboard!" | After score text is copied to clipboard |
| "Could not copy score" | When clipboard operation fails |
Note: If you don't see notifications, they may be appearing off-screen or blocked by another window. They don't affect gameplay—they're just helpful feedback!
The app uses these localStorage keys:
tutorialShown - Stores whether you've seen the tutorial (value: "true" or not set)savedGame - Stores your paused/interrupted game state (JSON object)customPuzzleImage - Your uploaded custom image (base64 data URL)customImageName - Filename of your custom image (string)puzzleHighScores - Your top 20 completion times (JSON array)Privacy Note: All data stays on your device. Nothing is uploaded to any server or shared with anyone.
The app is designed to be accessible:
Layout adapts to screen size automatically:
Desktop (>768px width):
Tablet (≤768px width):
Phone (≤480px width):
You now know everything about Picture Puzzle! Here's a quick recap:
Have fun and happy puzzling! 🧩