PicReact
Saved games stay in this browser only.
About the game
A nonogram is a puzzle drawn on a grid, in which hidden pictures wait to be uncovered. Every row and every column has a short list of numbers. Each number says how many squares in a row must be filled in a group, and the groups are separated by at least one empty square, in the order the numbers are written. A column marked 3 1, for instance, has a run of three filled squares and then, later, a single one. You solve it by reasoning only, and when every clue is satisfied the picture appears.
PicReact takes the usual idea and gives it two twists. Instead of a list of fixed puzzles, it generates a new random one whenever you ask, at four sizes: Easy (5 by 5), Medium (10 by 10), Hard (15 by 15) and Expert (20 by 20). And there is an editor: you can choose a size, paint squares to draw your own picture, and the game works out the numbers for you and turns it into a puzzle to solve. A puzzle can have more than one solution, and the game accepts any filling that satisfies all of the clues.
The author, bgonp, wrote it with React and TypeScript, and the game remembers the puzzle you were solving when you close the page. The clues go lighter as they are satisfied, and the row and the column under the pointer are highlighted to help you follow them.
Playing it here
Click Play, then choose a difficulty on the welcome screen, or Create to draw your own picture. Left-click a square to fill it, and hold the button down and drag to fill a whole stretch at once. Right-click to put a cross on a square you know is empty. On a touchscreen a tap on a square goes from empty to filled, then to a cross, then back to empty. A clue number turns pale when its row or column is done. The circular arrow resets the puzzle and the curved arrow undoes the last action. NEW goes back to the choice of difficulty (after asking if you want to discard the current puzzle), PLAY returns to the puzzle in progress and CREATE opens the editor.
Controls
| Input | Action |
|---|---|
| left-click (or drag) | fill a square (or a stretch of squares) |
| right-click (or drag) | mark a square with a cross |
| tap (touchscreen) | cycle a square: filled, cross, empty |
| undo arrow | undo the last action |
| circular arrow | clear the puzzle and start again |
| NEW / PLAY / CREATE | choose a new puzzle / go back to the puzzle in progress / draw your own |
A few things worth knowing
Start with the big numbers. A clue that nearly fills the row, such as 4 on a row of 5, tells you that the middle squares must be filled whatever happens.
Use the crosses. Marking the squares you know are empty makes the remaining clues much easier to read, and it keeps you from filling them by mistake.
Work on both axes. Move between the rows and the columns: every square you settle in one gives a clue for the other.
Credits and licence
PicReact was created by bgonp and is released under the GNU General Public License, version 3. The full source of the exact version served here is published next to the game, as the licence requires, and the licence text is linked from this page. This version has been changed by FredyGames: the share button and the links in the footer, which pointed to other sites, were removed, and the page now uses addresses with a hash so that it can run inside our player.