Create a Sudoku Puzzle using HTML CSS & JavaScript
Last Updated :
27 Feb, 2024
Improve
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.
<!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:
