Play nonograms free online

How to solve a nonogram

Every row has clues on its left and every column has clues above it. Each number is a block of squares in that colour, in the order you see them. A clue of 3 2 means a block of 3, then later a block of 2. Blocks of the same colour always have at least one empty square between them. Blocks of different colours can touch.

• Start with the big numbers. In a 10-square row, a block of 7 must cover the middle 4 squares wherever it sits. Fill those in.
• Mark the empty squares. Pick ✕ (or right-click) to mark squares you know are empty. They're just as useful as filled ones.
• Go back and forth. Every square you fill in a row gives you new clues for its column. Work across, then down, then across again.
• Watch the clues fade. When a row or column matches its clues, they fade out and the spare squares get a dot.
• Stuck? Press Hint. It fills one square and tells you which row or column proves it, so you learn the trick as well.

The sizes: Small pictures are 15 × 15 and take a few minutes. Medium are 20 × 20 and Large are 25 × 25. Huge pictures are 30 × 30 full scenes with sky, sea and lots of colours, so set aside a while for those. Every puzzle can be solved by logic alone, with no guessing.

Your own nonogram game

You'll describe it to a free AI assistant, paste what it writes into a file, and open it in your browser. No coding needed. The fun part is drawing your own pictures as rows of letters. The AI works out every clue for you.

Build it in five steps

Step 1 gives you a simple black-and-white version that works, and each step after it adds more. Yours will look a bit different from the one above, because the AI writes its own version each time.

1. Ask for a playable grid

   Start with one small black-and-white picture, so you can check the clues and clicking work. Copy this prompt into your AI assistant:

   Copy this promptCopy

   I don't know how to code. Please make me a nonogram (picture logic puzzle) game that runs in a web browser.
   
   Requirements:
   - ONE single HTML file (HTML, CSS and JavaScript together), no external libraries, no internet needed. I will save it and double-click it.
   - Store the picture in the code as rows of text, where "#" is a filled square and "." is empty. Start with a 10 by 10 picture of a heart.
   - Work out the clues from the picture: for each row and column, the lengths of each run of filled squares, in order. Show row clues on the left and column clues on top. An empty line shows 0.
   - Click a square to fill it in black, click again to clear it. Right-click marks it with an X.
   - Draw thicker lines every 5 squares.
   - When every row and column matches its clues, show "Solved!".
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Copy the code, paste it into your text editor and save it as nonogram.html. Double-click it and try to solve the heart.

2. Make it work on phones, with dragging

   Clicking one square at a time gets slow. Dragging along a row is much nicer, and it makes the game work on a touch screen.

   Copy this promptCopy

   That works, thank you. Please make filling faster and phone-friendly:
   - Use pointer events, so it works with a mouse, a finger or a pen. Set touch-action: none on the grid so the page doesn't scroll while I drag.
   - Press a square and drag to fill a straight line. Lock the line to the row or column I start moving along.
   - If the first square I press is already filled, the drag clears squares instead.
   - Add buttons under the grid to switch between "Fill" and "X", for phones that can't right-click.
   - Highlight the row and column under the pointer, and fade a clue out when its line is finished.
   - Add an Undo button: one drag is one step.
   Send me the complete updated file.

   Always ask for the complete file. Replace everything in nonogram.html, save, and refresh the tab (F5 or Cmd+R).

3. Add colour

   Colour nonograms look far better, and the colours give you extra clues.

   Copy this promptCopy

   Please change it to colour pictures:
   - Each picture has a palette, for example { r: "#E63946", g: "#3E9B4F", y: "#FFD166" }, and its rows use those letters, with "." for empty.
   - Each clue number now sits in a little rounded square of its colour, with white or dark text depending on which is easier to read.
   - The rule changes: blocks of the same colour need a gap between them, but blocks of different colours can touch. Make the solved check follow that.
   - Show a row of colour buttons under the grid, plus the X button. The number keys 1 to 9 pick a colour.
   - Replace the heart with a 10 by 10 strawberry: red berry, green leaves on top and yellow seeds.
   Send me the complete updated file.

   To draw your own picture, type it as rows of letters in the chat and say "use this picture instead". Keep every row the same length.

4. Add more pictures and a picker

   Now turn it into a real game with lots of pictures to find.

   Copy this promptCopy

   Please add:
   - Five more pictures of your choice, in sizes 10 by 10 and 15 by 15, each with 3 to 5 colours. Draw them carefully so they look good, with darker shading on one side.
   - A picker beside the grid showing a card for each picture. Unsolved pictures show a question mark; solved ones show the little picture and its name.
   - A timer that pauses when I switch tabs, and saving in localStorage, so my progress on every picture is kept when I close the page.
   - When I solve one, make the grid lines fade away, show the picture's name and a "Next picture" button.
   Send me the complete updated file.

   Some pictures can be solved in more than one way. If a picture has two answers, change a square or two and ask the AI to check it again (see Quick fixes).

5. Add hints and a reveal

   Finally, help for anyone who gets stuck, and a way to peek at the answer.

   Copy this promptCopy

   Please add:
   - A "Check" button that makes any wrong squares flash red.
   - A "Hint" button. Write a line solver: for one row or column, try every way the clue's blocks could fit around the squares already known, and find the squares that are the same in every way. The hint fills one of those squares and says which row or column proves it.
   - A "Reveal" button that needs a double-click (or two quick taps), so it isn't pressed by accident. It shows the finished picture on top of the grid with "Hide it and keep solving" and "Fill it in for me" buttons.
   Send me the complete updated file.

Quick fixes

Questions people ask

Twist it into something else

What to build next