Mini Sudoku Puzzle (6x6) — Free HTML CSS JS Snippet

Full 9x9 Sudoku is too large a puzzle to comfortably fit and finish inside a UI snippet demo, but the underlying constraint-satisfaction rules — every digit unique within its row, column, and box — are exactly the same on a smaller board. This snippet implements a genuinely playable 6x6 variant using digits 1 through 6 arranged in six 2x3 boxes, built with a real randomised backtracking generator and live constraint validation on every keystroke, teaching the identical algorithmic technique as the full-size game at a scope that is actually completable in a couple of minutes.

Generating a valid solved grid with randomised backtracking

generateSolution() starts from an empty 6x6 grid and calls fillGrid(), a recursive backtracking function that fills cells one at a time in row-major order. At each empty position, it shuffles the candidate digits 1 through 6 with a Fisher-Yates shuffle() (rather than trying them in fixed numeric order, which would always generate the same handful of grids) and attempts each candidate via isValidPlacement(). If a candidate is valid, it is placed and the function recurses into the next position; if the recursion eventually fails to complete the grid, that candidate is undone (reset to 0) and the next shuffled candidate is tried. This is the standard constraint-satisfaction backtracking pattern — try, recurse, undo on failure — and because the candidate order is randomised at every cell, repeated calls produce different valid solved grids rather than the same one every time.

Row, column, and 2x3 box validation

isValidPlacement(grid, r, c, val) is the single function responsible for enforcing every Sudoku rule, and it is reused both during generation and during live gameplay. It checks the target value does not already appear elsewhere in row r or column c, then computes the top-left corner of the containing 2x3 box with Math.floor(r / BOX_H) * BOX_H and Math.floor(c / BOX_W) * BOX_W (where BOX_H is 2 and BOX_W is 3, since a 6x6 grid divides into six boxes each spanning 3 columns and 2 rows) and scans every cell inside that box for a duplicate. Because the box dimensions are named constants rather than hard-coded literals, the same function would work unmodified on a differently-shaped mini-Sudoku variant if the constants were changed.

Puzzle creation and live conflict detection

makePuzzle() takes the completed solution and blanks out a fixed number of cells (16 of the 36, leaving 20 clues) at positions chosen by shuffling every cell index and taking the first N — ensuring the removed cells are different on every new puzzle. Cells that still hold their original solved value render as read-only .clue cells; blanked cells become editable. Crucially, validation does not wait until the grid is full: every render calls findConflicts(), which loops over every filled cell in the current userGrid and re-runs isValidPlacement() against it, adding any cell that now violates a row, column, or box constraint to a Set of conflict coordinates. Those cells immediately render with a red .conflict background, giving the player real-time feedback the instant an entry creates a duplicate, rather than only at a final "check" action.

Number pad and keyboard input working together

Selecting an editable cell highlights it and enables entry via two equivalent input paths: clicking a digit on the on-screen .pad-btn number pad, or pressing 1 through 6 on the keyboard while a cell is selected (handled by a single document-level keydown listener). Both paths call the same enterNumber() function, so validation and win-checking logic exists in exactly one place regardless of input method. A "Clear" pad button and the Backspace/Delete keys both route to enterNumber(0), blanking the selected cell.

Win detection and the timer

checkWin() first confirms every cell in the grid is non-zero via isGridComplete(), then re-runs findConflicts() — the puzzle only counts as solved when the grid is completely filled *and* zero conflicts exist simultaneously, which correctly rejects a full-but-invalid grid. A live timer starts the moment a new puzzle is generated, using Date.now() deltas updated on a 500ms interval, and stops the instant the win condition is met, with the final elapsed time shown in the win message via the same formatTime() helper used for the live display.