jigsaw puzzling

Home Screen Main entry screen of SnapPuzzle Solitaire showing the play button and overall progress.
Level Selection Screen Collection-based level selection with locked and unlocked puzzle levels.
Settings Control — Gameplay Customization Player adjusts sound, animations, and gameplay controls during the session
Level Selection — Progress Navigation Player selects a level from a collection based on unlocked progress and earned stars.
Collections Overview — Content Organization Player browses puzzle categories and uploads personal images to create custom puzzles.
Active Gameplay — Problem Solving Stage Player interacts with draggable puzzle pieces and reconstructs the image within time constraints.

Inspiration

Whenever I played puzzle games, I noticed I quickly lost interest if I did not like the image being used. Puzzle games are meant to reduce stress, but when the content feels forced, the experience becomes boring instead of relaxing. I realized many people want to solve puzzles that are personally meaningful.

This inspired me to build a puzzle game where users can choose or upload their own images. If a player connects emotionally with an image — a memory, a person, or a favorite moment — the experience becomes more engaging and calming.

The core idea behind the project is:

[ \text{Personal Connection} \rightarrow \text{Higher Engagement} \rightarrow \text{Stress Reduction} ]

What it does

This project is a customizable jigsaw puzzle game that allows players to:

Play puzzles organized into collections and levels
Earn points by completing puzzles
Unlock new levels progressively
Upload personal images and convert them into puzzles
Drag and place puzzle pieces with snapping behavior
Experience a simple and engaging puzzle-solving environment

Instead of fixed difficulty modes, the challenge increases naturally as levels progress.

How we built it

The project was developed as an interactive puzzle application. A major part of the development process involved using AI Studio and Gemini to support idea generation, structure logic, and guide implementation.

The system works through the following process:

The selected image is resized to a standard dimension.
The image is divided into puzzle pieces.
Puzzle pieces are randomly scattered.
Players drag pieces to reconstruct the original image.
A snapping mechanism detects correct placement using a distance threshold:

[ \sqrt{(x - x_c)^2 + (y - y_c)^2} < \epsilon ]

where
( (x, y) ) is the current position,
( (x_c, y_c) ) is the correct position,
and ( \epsilon ) is the snapping tolerance.

Completing a puzzle awards points that unlock new levels.

Challenges we ran into

One major challenge was implementing accurate snapping behavior so that pieces attach correctly without false matches. This required careful tuning of positional tolerance.

Handling different user-uploaded image sizes was another challenge. Images needed to be resized and normalized before splitting them into puzzle pieces.

Designing a smooth drag-and-drop interaction while maintaining performance was also a technical challenge. Additionally, creating progressive difficulty without using fixed modes required thoughtful level design.