Sweet Swap Level-Based Game

Project Overview

Sweet Swap is a multi-level match-3 puzzle game built in React. The user progresses through levels by reaching score targets within a limited number of moves. Each level has its own difficulty, board size, and score requirement. When a level is completed, a confetti animation runs for five seconds, after which the next level automatically loads. The dashboard tracks unlocked levels and best scores.

Screenshots

Key Features

Level-based progression with increasing difficulty.
Match-3 game logic including swapping, matching, cascading, and gravity refill.
Dashboard with level cards, best scores, and unlock tracking.
Five-second confetti animation on level completion.
Automatic transition to the next level after confetti ends.
Back button that immediately stops confetti and returns to the dashboard.
LocalStorage support for unlocked levels and best scores.
Restart button to reset the current level instantly.
Responsive and clean UI built without external CSS frameworks.

Functionality

The user selects a level from the dashboard.
A dynamic candy grid is generated based on the level.
The user swaps adjacent candies to make matches.
Matches are cleared, gravity pulls candies down, and new candies fill the grid.
Each match increases the score while moves decrease.
If the score reaches the target, confetti plays for five seconds.
After the confetti ends, the game automatically opens the next level.
If the user returns using the Back button, confetti stops immediately.
Best scores and unlocked levels remain saved even after refresh.

Technology Used

React
JavaScript
Canvas-confetti
LocalStorage
CSS-in-JS (inline styles)

Why This Project Is Useful

This project demonstrates how to build a complete, interactive game using React only. It covers real concepts like state management, animations, grid-based logic, dynamic rendering, and persistence using LocalStorage. It serves as a strong portfolio project showing both UI design and functional JavaScript logic.