Sudoku

A minimal, dependency-free Sudoku web game designed to run on any device — from e-readers (Kindle) to high-resolution desktops.

Features

• Algorithmic puzzle generation — unique-solution puzzles created via backtracking
• 5 difficulty levels — Very Easy, Easy, Medium, Hard, Very Hard
• Tap-based input — clickable cells + on-screen number pad (keyboard also supported)
• Real-time validation — conflicts highlighted immediately
• Pencil marks — toggle pencil mode to annotate candidates
• Hint system — reveals a random empty cell
• Save/resume — game state persisted in localStorage
• Monochrome support — auto-detects via @media(monochrome) + manual B&W toggle
• Zoom — scale the game up/down for any screen size
• Completion banner — numpad replaced with "Finished!" when solved

How to Play

1. Select a cell by clicking/tapping it
2. Click a number on the numpad (or press 1–9 on keyboard)
3. Press X or Backspace/Delete to clear a cell
4. Toggle Pencil to enter candidate notes
5. Use Hint to reveal a correct number
6. Numbers disappear from the numpad when fully placed correctly

Running

Directly

Open index.html in any browser.

Docker

docker build -t sudoku .
docker run -p 8080:80 sudoku

Then visit http://localhost:8080.

Project Structure

sudoku/
├── index.html    # Page markup — grid, toolbar, numpad
├── style.css     # Styles — layout, grid borders, monochrome mode
├── game.js       # All game logic — generation, input, rendering, save/load
└── Dockerfile    # nginx:alpine container for deployment

Architecture

The game is a single-page app with zero dependencies:

• Puzzle generator (generate) — fills a board via backtracking (solve), then removes clues while verifying unique solvability (countSolutions)
• Rendering (render) — reads game state and updates the DOM table directly
• Conflict detection (checkConflicts) — checks row/column/box for duplicates
• Numpad management (updateNumpad) — hides numbers that are fully placed
• Persistence — serializes full state to localStorage on every move

Monochrome Mode

Two mechanisms:

1. Auto-detection — window.matchMedia("(monochrome)") applies B&W mode on e-readers
2. Manual toggle — the B&W button adds a bw class to <body>

In monochrome mode, conflicts are indicated with a wavy underline instead of red text.

Controls

Action	Mouse/Touch	Keyboard
Select cell	Click cell	—
Enter number	Click numpad	1–9
Clear cell	Click X	Backspace / Delete
Pencil mode	Click Pencil button	—
Hint	Click Hint button	—
Zoom in/out	Click +/− buttons	—
B&W toggle	Click B&W button	—