A sudoku solver reasons in pencil, guesses in ink, and erases when it is wrong.
Every empty cell starts with pencil marks for each digit its row, column and box still allow, kept as a 9-bit mask. The solver applies logic first: naked singles, hidden singles, naked pairs, and pointing and claiming (a digit locked to one line inside a box, or to one box inside a line), and every deduction erases the marks it rules out. When logic runs dry it guesses in the cell with the fewest candidates and writes everything that follows in a new ink, so nested guesses stack up as blue, red, green and purple. A cell with no candidates left, or a unit with nowhere for a digit, is a contradiction: that ink is rubbed out, the marks come back from the snapshot taken at the guess, and the guessed digit is struck from the cell as a fact. The solver is a generator that yields one reasoning step at a time, and the card on the right plots guess depth over the whole search.
Try it. Choose Gentle, Moderate, Tough or Diabolical below (click the same level again for its next puzzle) and cycle the speed from Slow to Max. Click the grid or press space to pause, then press S or the right arrow to take one step at a time. Edit lets you type in your own puzzle: click a cell and type a digit (tap a selected cell to cycle digits on touch screens, C clears the grid), then press Solve.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated sudoku solver that shows its reasoning, with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and draws a 9 x 9 grid on an off-white paper background, with thicker lines around the 3 x 3 boxes.
- Hard-code one hard puzzle as an 81-character string with dots for blanks. Draw the givens in a bold serif font.
- Keep a 9-bit candidate mask for every empty cell and draw the candidates as tiny pencil marks in a 3 x 3 layout inside the cell.
- Write the solver as a JavaScript generator function that yields one move at a time: place naked singles (one candidate left) and hidden singles (the only cell in a row, column or box that can take a digit), erasing that digit from the 20 peers. When neither applies, guess in the cell with the fewest candidates, saving a snapshot first. If a cell runs out of candidates, restore the snapshot and remove the guessed digit from that cell.
- Call the generator a few times a second from requestAnimationFrame and redraw after each move.
Once that works, make it beautiful:
- Animate each move: highlight the row, column or box that justifies it, fade erased pencil marks, and write the new digit in.
- Write deductions made after a guess in a different ink color for each guess depth, and on a contradiction erase that ink before continuing.
- Add a small chart of search depth over time, plus a speed control and a pause button with single-stepping.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as naked pairs and pointing pairs, a handwriting-style stroke font for the digits, or letting me type in my own puzzle.
