Killer Sudoku
Killer Sudoku Interface
The Killer Sudoku interface has three main sections:
Header / Controls (top) – shows title, difficulty, and statistics.
Sudoku Grid (center) – where the puzzle itself appears.
Game Controls (bottom) – for number input, hints, and actions.
Everything stays centered and scales neatly to fit the screen.
Header Section
🔹 a. Difficulty Selector
At the top, you’ll see buttons like:
The currently active difficulty (e.g., Medium) is highlighted (green or bold).
Clicking a different difficulty:
Generates a new puzzle.
Resets time, mistakes, and hints.
This lets you instantly switch difficulty without reloading the page.
🔹 b. Statistics Bar
Just below the difficulty selector is a white, rounded bar with three sections:
| Item | Example | Meaning |
|---|---|---|
| ⏱ Time: | 00:35 | Counts how long you’ve been playing. |
| ❌ Mistakes: | 1 / 3 | You can make up to 3 errors; after 3, the game ends. |
| 💡 Hints Left: | 3 | Shows how many hints you can still use. |
This bar updates live while you play.
It’s styled with subtle shadows and sits above the puzzle grid.
Sudoku Grid (Main Puzzle Area)
This is the heart of the interface — a 9×9 grid divided into 3×3 boxes, with cages drawn over it.
Grid Features
Each small square is a cell.
Some cells are pre-filled with numbers — these can’t be changed.
Blank cells are clickable/editable.
Clicking a cell highlights it with a light blue border to show it’s active.
You can enter numbers either by:
Clicking the number buttons below, or
Typing digits (1–9) on your keyboard.
🔸 Cage Lines and Sums
Each cage (a group of cells) is outlined with a dashed red line.
In the top-left corner of each cage, a small blue number appears — this is the sum that the numbers in that cage must add up to.
Example:
If you see “10” in a cage covering two cells, those two cells must contain numbers that sum to 10 (e.g., 1+9, 2+8, etc.), with no repeats.
🔸 Mistake Highlighting
If you enter an incorrect number:
The cell might flash red briefly.
The Mistakes counter increases.
After three mistakes, the “Game Over” modal will appear.
Control Panel (Bottom Section)
Below (or next to) the grid, you’ll see the main control buttons:
🔢 Number Pad
Buttons labeled 1–9, plus a Clear ⌫ button.
Clicking a number fills it into the selected cell.
“Clear” erases the current cell’s value.
You can also use your keyboard:
Keys 1–9 → fill the number.
Delete/Backspace/0 → clear.
Game Action Buttons
A small toolbar provides extra game controls, usually styled as rounded buttons:
| Button | Function |
|---|---|
| 💡 Hint | Reveals the correct number for the selected cell (uses one hint). |
| ↩️ Undo | Reverts your last move. |
| ✅ Check | Highlights incorrect entries. |
| Exports the current puzzle and solution as a printable PDF. | |
| 🔄 New Game | Generates a brand new puzzle with the same difficulty. |
Responsive Behavior
The layout adapts based on screen size:
On desktops, the grid and controls are side-by-side or centered.
On tablets/phones, the grid stays on top, and controls appear below.
All buttons enlarge slightly for better tap accuracy on touchscreens.
Interactive Feedback
Timer runs continuously while you play.
Undo and Hint buttons provide smooth feedback (no page reload).
When you solve the puzzle correctly:
The Win Modal appears, showing time, mistakes, and hints used.
A confetti animation celebrates your success.🎊
Everything is interactive, responsive, and designed for easy play — whether you use mouse clicks, keyboard input, or touch gestures.