A fun and interactive color sorting puzzle game built with HTML, CSS, and JavaScript! Test your brain, sharpen your eyes, and pour colors with style using smooth animations. πβ¨
Sort all the colored blocks into their respective containers! Each color must be grouped in a single column. Move colors by clicking to select and then clicking another container to pour β just like real-life liquid puzzles.
π Play it live here!
- π² Randomized puzzles every time you play
- π― Winning logic to detect your big brain moment
- π Animated pouring effect for visual feedback
- π Dynamic level control with just one variable
- π±οΈ Intuitive click-and-pour interaction
- π‘ Built for web β no installations required!
- The game generates
N
boxes (boxAmount
), each filled with a mix of colors. - Your goal: Group identical colors into the same box.
- One box can only hold up to 4 colored blocks.
- You can only pour if:
- The destination box has space.
- The color you're pouring matches the top color of the destination.
- HTML5 β Semantically structured UI
- CSS3 β Pouring animations & style
- JavaScript β Core logic, DOM manipulation, and interactivity
- Clone this repo:
git clone https://github.com/your-username/color-sort-puzzle.git cd color-sort-puzzle
- Open
index.html
in your browser.
Pull requests are welcome! Feel free to fork the repo and improve the game or animations. π
This project is open-source and available under the MIT License.
Made with β€οΈ by Henok