Sudoku++
A browser-based Sudoku puzzle with multiple grid sizes and difficulty levels. Visit /puzzles/sudoku.
Architecture
The puzzle is entirely client-side JavaScript. The server provides:
- The template (
templates/sudoku.html) — page layout with controls (grid size, difficulty, timer, number pad) and canvas area. - The game script (
static/js/sudoku.js) — ~450 lines handling puzzle generation, grid rendering, mouse/touch interaction, keyboard shortcuts, timer, undo, and pencil marks. - The game route (
src/routers/sudoku.py) — serves the template.
Puzzle Generation
Generation uses a backtracking solver:
- A complete valid grid is generated by randomly filling cells using a recursive backtracking solver with shuffled candidate numbers.
- Cells are removed one at a time in random order.
- After each removal, a solution counter verifies the puzzle still has exactly one unique solution (limited to checking 2 solutions for performance).
- The number of cells removed depends on the difficulty level.
Difficulty levels by grid size
| Grid | Easy | Medium | Hard |
|---|---|---|---|
| 4×4 | 4 removed | 7 removed | 10 removed |
| 6×6 | 10 removed | 18 removed | 24 removed |
| 9×9 | 30 removed | 45 removed | 55 removed |
Canvas Rendering
The canvas is rendered at the container width with matching aspect ratio. Each cell is sized evenly within the available space. The rendering includes:
- Grid lines: thin lines for individual cells, thick lines for box borders
- Given numbers: bold font (original clues)
- User numbers: regular font (player-entered)
- Pencil marks: small numbers arranged in a grid within the cell (2×2 for 4×4, 2×3 for 6×6, 3×3 for 9×9)
- Selection highlight: the selected cell is highlighted
- Same-number highlight: all cells with the same number as the selected cell are subtly highlighted
Colours are read from CSS custom properties to match the active Bootswatch theme.
Interaction
Mouse
Click a cell to select it. Use the number pad below the grid or keyboard to enter numbers.
Touch
Tap a cell to select it. Use the number pad below the grid to enter numbers.
Keyboard
| Key | Action |
|---|---|
| 1–9 | Enter number |
| Backspace / Delete | Clear cell |
| Arrow keys | Navigate cells |
| Ctrl+Z / Cmd+Z | Undo |
Number Pad
A row of buttons below the grid shows numbers 1–N (where N is the grid size) plus a clear button. Each button is clickable and highlights when the corresponding number appears in the selected cell.
Pencil Marks
Toggle Notes mode to enter candidate numbers in a cell without committing to a value. Numbers appear as small digits within the cell. Tap a number in Notes mode to toggle it on/off for the selected cell.
Timer
A timer starts when a new game is generated and stops when the puzzle is correctly completed. The completion modal displays the elapsed time.
Files
| File | Role |
|---|---|
templates/sudoku.html |
Game template (layout, controls, canvas, number pad) |
static/js/sudoku.js |
Game engine (generation, solver, rendering, interaction) |
src/routers/sudoku.py |
GET /puzzles/sudoku |
tests/test_routes.py |
Route tests for puzzle page rendering |