Create a Sudoku Puzzle using HTML CSS & JavaScript
We will create a sudoku puzzle. where the user will complete the sudoku and we have a solve and reset button to completely solve the sudoku and reset the puzzle.
Prerequisites
Approach
This HTML and JavaScript code generates and solves Sudoku puzzles. It creates a Sudoku grid with randomly generated initial values. Users can solve the puzzle by clicking the “Solve” button, which fills in the solution. The “Reset” button clears the puzzle for a new game. The grid layout is styled using CSS. The JavaScript functions handle puzzle generation, solving, and resetting, ensuring a functional Sudoku puzzle experience without a separate validation step.
Example: This example shows the implementation of the above explanation.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Sudoku Puzzle</ title > < style > body { font-family: Arial, sans-serif; background-color: #F5FCFF; } .container { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } .row { display: flex; } .cell { width: 30px; height: 30px; border: 1px solid black; text-align: center; line-height: 30px; box-sizing: border-box; } .lightBackground { background-color: #A9A9A9; } .darkBackground { background-color: #EBF3E8; } .buttonContainer { margin-top: 20px; display: flex; /* Ensure buttons are always displayed */ align-items: center; justify-content: center; } .buttonContainer button { margin-right: 10px; /* Add margin between buttons */ } .result { margin-top: 20px; font-weight: bold; } .correct { color: green; } .incorrect { color: red; } </ style > </ head > < body > < div class = "container" id = "container" ></ div > < div class = "buttonContainer" > < button id = "solveButton" >Solve</ button > < button id = "resetButton" >Reset</ button > </ div > < script > document.addEventListener("DOMContentLoaded", function () { const container = document.getElementById("container"); // Function to generate a random Sudoku puzzle function generateRandomSudoku() { // Placeholder function for generating a random puzzle (9x9) const puzzle = [ [5, 3, 0, 0, 7, 0, 0, 0, 0], [6, 0, 0, 1, 9, 5, 0, 0, 0], [0, 9, 8, 0, 0, 0, 0, 6, 0], [8, 0, 0, 0, 6, 0, 0, 0, 3], [4, 0, 0, 8, 0, 3, 0, 0, 1], [7, 0, 0, 0, 2, 0, 0, 0, 6], [0, 6, 0, 0, 0, 0, 2, 8, 0], [0, 0, 0, 4, 1, 9, 0, 0, 5], [0, 0, 0, 0, 8, 0, 0, 7, 9] ]; return puzzle; } // Function to solve the Sudoku puzzle function solveSudoku(board) { // Placeholder function for solving Sudoku puzzle const solvedPuzzle = JSON.parse(JSON.stringify(board)); solveHelper(solvedPuzzle); return solvedPuzzle; } // Helper function for solving Sudoku recursively function solveHelper(board) { const emptyCell = findEmptyCell(board); if (!emptyCell) { return true; // Puzzle solved } const [row, col] = emptyCell; for (let num = 1; num <= 9; num++) { if (isValidMove(board, row, col, num)) { board[row][col] = num; if (solveHelper(board)) { return true; } board[row][col] = 0; // Backtrack } } return false; // No valid number found for this cell } // Function to find an empty cell in the Sudoku puzzle function findEmptyCell(board) { for (let row = 0; row < 9 ; row++) { for (let col = 0 ; col < 9; col++) { if (board[row][col] === 0) { return [row, col]; } } } return null; // No empty cell found } // Function to check if a move is valid function isValidMove(board, row, col, num) { // Check row for (let i = 0 ; i < 9; i++) { if (board[row][i] === num) { return false; } } // Check column for (let i = 0 ; i < 9; i++) { if (board[i][col] === num) { return false; } } // Check 3x3 grid const startRow = Math .floor(row / 3) * 3; const startCol = Math .floor(col / 3) * 3; for (let i = startRow ; i < startRow + 3; i++) { for (let j = startCol ; j < startCol + 3; j++) { if (board[i][j] === num) { return false; } } } return true; // Move is valid } // Function to create the Sudoku puzzle grid function createSudokuGrid(puzzle) { container.innerHTML = '' ; puzzle.forEach((row, rowIndex) => { const rowElement = document.createElement('div'); rowElement.classList.add('row'); row.forEach((cell, columnIndex) => { const cellElement = document.createElement('input'); cellElement.classList.add('cell'); cellElement.classList .add((rowIndex + columnIndex) % 2 === 0 ? 'lightBackground' : 'darkBackground'); cellElement.type = 'text'; cellElement.maxLength = 1; cellElement.value = cell !== 0 ? cell : ''; rowElement.appendChild(cellElement); }); container.appendChild(rowElement); }); } // Initialize puzzle let initialPuzzle = generateRandomSudoku(); let puzzle = JSON.parse(JSON.stringify(initialPuzzle)); let solvedPuzzle = []; // Function to solve the puzzle function solvePuzzle() { solvedPuzzle = solveSudoku(puzzle); createSudokuGrid(solvedPuzzle); } // Function to reset the puzzle function resetPuzzle() { initialPuzzle = generateRandomSudoku(); puzzle = JSON.parse(JSON.stringify(initialPuzzle)); solvedPuzzle = []; createSudokuGrid(puzzle); } // Initial puzzle creation createSudokuGrid(puzzle); // Attach event listeners to buttons document.getElementById("solveButton") .addEventListener("click", solvePuzzle); document.getElementById("resetButton") .addEventListener("click", resetPuzzle); }); </ script > </ body > </ html > |
Output: