Sudoku - AI-Assisted Development Log

A complete record of developing a classic 9x9 Sudoku puzzle game using AI tools — from puzzle generation algorithms to polished UI and mobile touch support.

Project Overview

Sudoku is a classic number puzzle game built entirely with AI assistance. Players fill a 9x9 grid so that each row, column, and 3×3 box contains all digits from 1 to 9 exactly once.

Tech Stack:

• Vanilla JavaScript (ES6+)
• HTML5 Canvas
• CSS3 Responsive Design
• Web Audio API (sound effects)

Core Features:

• Classic 9x9 Sudoku gameplay with three difficulty levels (Easy, Medium, Hard)
• Smart puzzle generation with backtracking solver algorithm
• Note-taking (pencil marks) mode for advanced players
• Hint system with one correct cell reveal
• Conflict highlighting to show row/column/box errors
• Undo support with move history
• Number fill count progress bar
• Timer and mistake tracking
• Mobile-first responsive design
• Touch-optimized number pad

---

AI Usage Workflow

Phase 1: Creating the Base Game

Goal: Get AI to help build a fully playable Sudoku prototype

Prompt Example:

Help me create a Sudoku game using HTML5 Canvas and JavaScript.
It needs:
1. A 9x9 grid with cell selection
2. Puzzle generation using backtracking algorithm
3. Three difficulty levels (Easy: 35 empty, Medium: 45, Hard: 52)
4. Number input via on-screen number pad
5. Conflict detection (row, column, box)
6. Inherit from the existing GameBase class

Please provide the complete game logic code.

AI Output Highlights:

• Created the backtracking Sudoku solver and puzzle generator
• Implemented the 9x9 grid renderer with cell selection
• Built the number pad with fill count progress bars
• Added conflict detection and visual highlighting

Key Takeaway: The AI generated a production-ready core. The backtracking algorithm worked correctly on the first pass, producing valid puzzles for all three difficulty levels.

---

Phase 2: Note-Taking & Hint System

Goal: Add advanced features for a richer gameplay experience

Prompt:

Now I want to add:
1. A note-taking mode where players can pencil-mark candidate numbers
2. A hint system that reveals the correct number for the selected cell
3. Undo support to revert the last move
4. Visual highlight for cells that share the same number as the selected cell
5. Error highlighting toggle

Please implement these features.

AI Solutions:

Feature	Implementation	Notes
Note Mode	Toggle button; tap number pad to add/remove candidate marks	Pencil marks shown as small 3×3 grid in each cell
Hint System	Uses the pre-computed solution array to fill one cell	Increases hint counter
Undo	Move history stack with board/notes/mistakes state snapshots	Limited to 100 history entries
Same-Number Highlight	All cells with the same value as the selected cell get a darker background	Makes pattern matching easier
Error Highlight	Optional toggle to shade cells with conflicts in red	Helps beginners learn

---

Phase 3: UI Polish & Mobile Optimization

Problem: The initial UI was functional but lacked visual polish, and touch targets were too small on mobile.

How to Describe to AI:

Please improve the UI and mobile experience:
1. Make the number pad buttons easier to tap on mobile
2. Add a difficulty selection modal before the game starts
3. Show number fill count as progress bars on each digit button
4. Add smooth animations for modal transitions
5. Improve the game-over screen with detailed stats
6. Make sure touch events work smoothly without delays

AI Results:

• Redesigned the layout with a dark gradient theme and gold accent colors
• Created a pre-game difficulty modal with animated entrance
• Added fill-count progress bars on each number button showing how many of 9 cells are placed
• Built a detailed game-over overlay showing time, mistakes, and hints used
• Optimized touch handling with touch-action: none and proper event binding

---

Key Algorithms

Backtracking Solver

The puzzle generator uses a randomized backtracking algorithm:

1. Find the first empty cell
2. Try numbers 1-9 in random order
3. Check if the placement is valid (row, column, box)
4. Recurse — if a solution is found, return it
5. If no number works, backtrack and try the next number

function solveSudoku(grid):
    for each empty cell (row, col):
        for num in shuffled([1..9]):
            if isValidPlacement(grid, row, col, num):
                grid[row][col] = num
                if solveSudoku(grid):
                    return true
                grid[row][col] = 0
        return false
    return true

Conflict Detection

Three rules checked when placing a number:

• Row constraint: No duplicate in the same row
• Column constraint: No duplicate in the same column
• Box constraint: No duplicate in the same 3×3 box

Difficulty Levels

Level	Empty Cells	Description
Easy	~35	Suitable for beginners, ~20 min
Medium	~45	Moderate challenge, ~30 min
Hard	~52	Expert level, ~45+ min

---

Lessons Learned

1. Backtracking is reliable for Sudoku: The algorithm is fast enough (< 50ms) to generate any 9×9 puzzle instantly, even on mobile devices.

2. Note-taking is essential: Pencil marks are a core feature of Sudoku. The 3×3 mini-grid display per cell was the right approach for showing candidate numbers.

3. Touch optimization matters: Setting touch-action: none and using touchstart events directly (instead of click) eliminated the 300ms tap delay on mobile browsers.

4. Fill count progress bars: Showing how many cells are filled for each number gives players a useful visual hint for strategy planning.

5. Undo with state snapshots: Storing full board state snapshots is simpler and more reliable than storing individual moves, especially when notes are involved.

---

Try It Yourself

Play the Sudoku game here: Sudoku Puzzle

Or open it directly in your browser.