Color Sort Water Puzzle with 20 Levels – HTML, CSS & JS

Color Sort, also known as water sort, is a puzzle where coloured liquid is poured between glass tubes until every tube holds a single colour. The rule is simple: a tube holds four units, a pour needs an empty tube or a tube whose top colour matches, and the whole run of that colour moves at once if it fits. This version is a complete game with 20 levels in four tiers, hidden layers, a hint solver, free undo, a Daily Puzzle with a streak and a pour animation, in plain HTML, CSS and JavaScript with no libraries, images or audio files.

Boards that are always solvable, generated backwards

A random deal can produce a board nobody can finish. Instead scramble() starts from the solved board and plays moves backwards. Each step is the exact inverse of a legal pour: take k units from the top of one tube and put them on a tube whose top colour is different (or empty). Played forwards in reverse order, those steps solve the board, so a solution is guaranteed, and the number of steps is the par. Boards that are not mixed enough, or that start already sorted, are thrown away and the next seed is tried. A seeded random generator (mulberry32) means level i is the same board for every player.

Levels as data

The LEVELS array holds, for each level, the number of colours, the number of empty tubes, how many scramble steps to apply and whether layers are hidden. The four tiers (Splash, Stream, Torrent, Flood) grow from 3 colours to 12. From level 11, only the top unit of each tube is visible and the layers underneath show a question mark until they reach the top, so you have to plan with partial information. Adding a level means adding one row.

A hint solver, not a canned answer

The Hint button runs a greedy best-first search (solve()) from the current board, with a small heuristic: how many units sit on top of a different colour, and how many tubes start with the same colour. It uses a binary heap, a canonical key that ignores the order of the tubes, and caps on the number of nodes and the time. The first move of the solution found is highlighted: the source tube in amber and the target tube in green. A hint costs one star, and each level gives three.

Pouring you can see and hear

When you pour, the source tube lifts, tilts toward the target and a stream of the right colour flows down before the units change tubes. The new layers grow into place, and the sound is a run of short bubble tones whose length matches the number of units moved. A completed tube glows green and is locked. Pours that would only waste a move, such as emptying a single-colour tube into an empty tube, are refused with a short explanation.

Stars, undo and the daily puzzle

Moves are counted against the par. Three stars for par plus about 25 percent, two stars for about 70 percent more, and one star for any solution, minus one star if you used a hint. Undo is free and removes the move from the counter, because it restores a snapshot of the tubes and the hidden layers. Winning a level unlocks the next. The Daily Puzzle builds its board from the date, so everyone plays the same one, and clearing it on consecutive days builds a streak. Progress, best moves and the streak are saved to localStorage inside try/catch.

Accessible and responsive

Every colour can show a symbol (a circle, triangle, square and so on), so the game does not depend on telling colours apart. Tubes are focusable buttons with labels such as "Tube 3: colour 2, colour 5", and the keyboard works: arrow keys move focus, Enter or Space selects and pours, the number keys pick a tube, and Z, H and R undo, hint and restart. The whole game scales to short preview areas, and on phones the layout stacks and the page scrolls.