<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Challenging Sudoku Game</title>
<style>
table {
border-collapse: collapse;
border: 2px solid black;
}
td {
width: 30px;
height: 30px;
border: 1px solid black;
text-align: center;
font-size: 20px;
cursor: pointer;
}
.filled {
background-color: #333;
color: white;
}
.blank {
background-color: white;
}
.correct {
background-color: lightgreen;
}
.incorrect {
background-color: lightcoral;
}
</style>
</head>
<body>
<table id="sudoku-board"></table>
<button onclick="checkSolution()">Check Solution</button>
<script>
let board = [];
function generateRandomSudoku() {
const emptyBoard = Array.from({ length: 9 }, () => Array.from({ length: 9 }, () => 0));
solveSudoku(emptyBoard);
board = JSON.parse(JSON.stringify(emptyBoard));
// Randomly remove cells to create a playable puzzle
const cellsToRemove = Math.floor(Math.random() * 30) + 30; // Randomly remove 30-59 cells
let removedCount = 0;
while (removedCount < cellsToRemove) {
const row = Math.floor(Math.random() * 9);
const col = Math.floor(Math.random() * 9);
if (board[row][col] !== 0) {
board[row][col] = 0;
removedCount++;
}
}
}
function isValid(board, row, col, num) {
for (let i = 0; i < 9; i++) {
if (board[row][i] === num || board[i][col] === num) {
return false;
}
}
const startRow = Math.floor(row / 3) * 3;
const startCol = Math.floor(col / 3) * 3;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (board[startRow + i][startCol + j] === num) {
return false;
}
}
}
return true;
}
function solveSudoku(board) {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (board[row][col] === 0) {
for (let num = 1; num <= 9; num++) {
if (isValid(board, row, col, num)) {
board[row][col] = num;
if (solveSudoku(board)) {
return true;
}
board[row][col] = 0;
}
}
return false;
}
}
}
return true;
}
function displayBoard(board) {
const table = document.getElementById("sudoku-board");
table.innerHTML = '';
for (let i = 0; i < 9; i++) {
const row = document.createElement("tr");
for (let j = 0; j < 9; j++) {
const cell = document.createElement("td");
if (board[i][j] === 0) {
cell.textContent = "";
cell.classList.add("blank");
cell.setAttribute("onclick", `fillCell(${i},${j})`);
} else {
cell.textContent = board[i][j];
cell.classList.add("filled");
}
row.appendChild(cell);
}
table.appendChild(row);
}
}
function fillCell(row, col) {
const value = prompt("Enter a number (1-9):");
if (value && /^\d$/.test(value) && isValid(board, row, col, parseInt(value, 10))) {
board[row][col] = parseInt(value, 10);
displayBoard(board);
} else {
alert("Invalid input!");
}
}
function checkSolution() {
let allCellsFilled = true;
const cells = document.querySelectorAll("td");
cells.forEach((cell, index) => {
if (cell.classList.contains("blank")) {
allCellsFilled = false;
}
});
if (!allCellsFilled) {
alert("Please fill all cells before checking the solution.");
return;
}
let isCorrect = true;
cells.forEach((cell, index) => {
const row = Math.floor(index / 9);
const col = index % 9;
if (!cell.classList.contains("blank") && cell.textContent !== board[row][col].toString()) {
cell.classList.add("incorrect");
isCorrect = false;
} else {
cell.classList.remove("incorrect");
}
});
if (isCorrect) {
alert("Congratulations! You solved the Sudoku.");
} else {
alert("There are mistakes in your solution. Keep trying!");
}
}
generateRandomSudoku();
displayBoard(board);
</script>
</body>
</html>