HTML+JS+CSS制作一個數獨游戲

閑來無事，用HTML+JS+CSS制作了一個數獨游戲消遣。其實主要是自己做題的時候用筆畫刪除數字太容易出錯，所以想搞一個程序稍微輔助一下。通過制作這個程序，反而提高了手工做題的水平，至少學會了記錄步數以便于回退。
20250710功能更新：用戶確定的單元格同時顯示單元格值以及該單元格是第幾步確定的，便于測試錯誤時回退；增加唯一可用數字高亮顯示功能，幫助找到確定數據的單元格位置；增加撤銷到指定步數功能，便于快速回撤到本次試探的開始位置。

0711：補上了手工輸入題目的功能。

1、游戲的界面（舊界面）：

2、游戲的玩法（新界面）：

3、游戲結束時彈出提示框（舊界面）：

下面是游戲的全部代碼。其中HTML負責UI構造，CSS負責UI的顯示，JS包含了游戲的全部邏輯。

1、sudokuUI.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>數獨游戲</title><link rel="stylesheet" href="sudoku_style.css" />
</head>
<body><h1>數獨游戲</h1><div class="sudoku-container"><table id="sudoku-board"></table><div class="buttons"><button id="new-game" class="single-line-button">新題</button><button id="reset-btn" class="single-line-button">重置</button><button id="answer-btn" class="single-line-button">答案</button><br/><button id="highlight-unique-btn"  class="double-line-button">高亮唯一<br/>可用數字</button><button id="go-back-btn" class="double-line-button">回退至<br/>指定步數</button><button id="input-new-game" class="double-line-button">手工輸入<br/>新數獨題</button></div></div><dialog id="gridDialog"><h3>在每個單元格中輸入1-9的數字</h3><table id="gridTable"></table><button id="submitGrid">提交</button></dialog><script src="sudoku_script.js"></script>
</body>
</html>

2、sudoku_style.css

body {font-family: Arial, sans-serif;text-align: center;background-color: #f4f4f4;}h1 {margin-top: 30px;}.sudoku-container {display: inline-block;margin-top: 20px;padding: 20px;background: beige;border-radius: 10px;box-shadow: 0 0 15px rgba(0,0,0,0.1);}#sudoku-board {border-collapse: collapse;margin: 0 auto;}#sudoku-board td {width: 40px;height: 40px;text-align: center;vertical-align: middle;border: 1px solid #999;font-size: 18px;cursor: pointer;transition: background 0.2s ease;position: relative;padding: 0;}.cell-step {font-size: 12px;color: orange;margin-top: 2px;line-height: 1;text-align: center;}.sudoku-mini-grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);width: 100%;height: 100%;}.mini-cell {font-size: 11px;color: #222;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;user-select: none;cursor: pointer;transition: background 0.2s, color 0.2s;}.mini-cell.gray {color: #bbb;
}.mini-cell.highlight {background: #b3e0ff !important;color: #222;border-radius: 5px;
}.mini-cell.black {color: #222;}.mini-cell.yellow {color: #ff0;}.mini-cell:hover:not(.gray) {background: #e0e0e0;}.sudoku-cell-fixed {font-size: 24px;font-weight: bold;color: #1976d2;display: flex;align-items: center;justify-content: center;height: 100%;}.sudoku-cell-user{font-size: 24px;font-weight: bold;color: #388e3c;display: flex;align-items: center;justify-content: center;height: 100%;}.sudoku-mini-grid {width: 100%;height: 100%;pointer-events: auto;}#sudoku-board tr:nth-child(3n) td {border-bottom: 2px solid #000;}#sudoku-board td:nth-child(3n) {border-right: 2px solid #000;}#sudoku-board tr:first-child td {border-top: 2px solid #000;}#sudoku-board td:first-child {border-left: 2px solid #000;}#sudoku-board .preset {background-color: #e0e0e0;font-weight: bold;}#sudoku-board .user-input {background-color: #fff;}#sudoku-board .error {color: red;}.buttons {margin-top: 20px;}.buttons button {margin: 10px;font-size: 16px;cursor: pointer;background-color: #4CAF50;color: white;border: none;border-radius: 5px;transition: background 0.2s ease;vertical-align: middle;}.single-line-button {padding: 10px 20px;}.double-line-button {padding: 5px;}.buttons button:hover {background-color: #45a049;}.buttons button:active {background-color: #3e8e41;}.sudoku-cell-fixed.red, .sudoku-cell-user.red { color: red; }.cell {width:28px;height:28px;
}

3、sudoku_script.js

// =====================
// 數獨游戲核心腳本
// =====================// 獲取頁面上的主要DOM元素
const boardElement = document.getElementById("sudoku-board"); // 數獨主棋盤容器
const newGameBtn = document.getElementById("new-game");      // 新游戲按鈕
const resetBtn = document.getElementById("reset-btn");      // 重置按鈕
const answerBtn = document.getElementById("answer-btn");    // 查看答案按鈕
const highlightUniqueBtn = document.getElementById("highlight-unique-btn"); // 高亮唯一解按鈕
const goBackBtn = document.getElementById("go-back-btn");   // 撤銷步數按鈕
const inputDialog = document.getElementById('gridDialog');         // 自定義題目輸入對話框
const openBtn = document.getElementById('input-new-game'); // 打開自定義題目按鈕
const inputTtable = document.getElementById('gridTable');           // 自定義題目表格
const submitBtn = document.getElementById('submitGrid');   // 提交自定義題目按鈕// 撤銷到指定步數
// 用戶點擊“撤銷”按鈕時觸發
// 會彈窗讓用戶輸入目標步數，撤銷到該步
// 步數小于1或大于當前步數無效
// 會清除多余步數填入的格子
// 完成后刷新棋盤
goBackBtn.addEventListener("click", () => {if (stepCounter <= 1) {alert("沒有可撤銷的步數");return;}let input = prompt("輸入要撤銷到的目標步數，應為1~" + (stepCounter - 1) + "之間的數字");if (input === null) return; // 用戶取消let targetStep = parseInt(input.trim(), 10);if (isNaN(targetStep) || targetStep < 1 || targetStep >= stepCounter) {alert("輸入的步數不存在");return;}for (let r = 0; r < 9; r++) {for (let c = 0; c < 9; c++) {if (userSteps[r][c] !== null && userSteps[r][c] > targetStep) {currentBoard[r][c] = null;  // 清除已填入的數據userSteps[r][c] = null;  // 清除該單元格對應的步數}}}stepCounter = targetStep + 1;drawBoard();
});// 重置按鈕事件
// 恢復到初始題面，清空用戶所有填寫和計時，刷新棋盤
resetBtn.addEventListener("click", () => {// 初始化相關變量currentBoard = JSON.parse(JSON.stringify(originalBoard));userSteps = Array.from({ length: 9 }, () => Array(9).fill(null));stepCounter = 1;redCells = new Set();timerStart = null;timerUsed = 0;// 重繪盤面drawBoard();
});// 默認初始題面，此題號稱超五星難度。可被新題或自定義題替換
let originalBoard = [[null, null, null, 3, null, null, 1, null, null],[5, null, null, 4, null, null, null, 9, null],[null, null, null, null, 2, 8, 6, null, null],[null, 9, null, null, null, null, null, null, 1],[null, null, 8, null, null, 7, null, null, 2],[null, 1, null, null, 4, null, 8, null, null],[null, null, 4, null, 8, 5, null, null, null],[3, null, null, 1, null, null, null, 4, null],[null, null, 2, 6, null, null, null, null, null]
];let currentBoard = JSON.parse(JSON.stringify(originalBoard)); // 當前棋盤狀態
// 步數記錄：userSteps[row][col] = step（第幾步），未填為 null
let userSteps = Array.from({length: 9}, () => Array(9).fill(null)); // 用戶每步填寫記錄
let stepCounter = 1; // 當前步數，從1開始
// 保存被標紅的格子，格式如：'row,col'
let redCells = new Set(); // 標記紅色警示格
// 計時相關
let timerStart = null; // 計時起點
let timerUsed = 0;     // 用時（秒）// 渲染棋盤主函數
// 根據currentBoard和用戶操作，動態生成HTML并綁定事件
function drawBoard() {boardElement.innerHTML = "";for (let row = 0; row < 9; row++) {const tr = document.createElement("tr");for (let col = 0; col < 9; col++) {const td = document.createElement("td");td.dataset.row = row;td.dataset.col = col;// 已確定數字if (currentBoard[row][col]) {const isPreset = originalBoard[row][col];let cellClass = isPreset ? 'sudoku-cell-fixed' : 'sudoku-cell-user';if (redCells.has(row + ',' + col)) {cellClass += ' red';}let stepHtml = '';if (!isPreset && userSteps[row][col] !== null) {stepHtml = `<div class="cell-step">${userSteps[row][col]}</div>`;}td.innerHTML = `<div class="${cellClass}">${currentBoard[row][col]}<br>${stepHtml}</div>`;// 右鍵取消td.oncontextmenu = function (e) {e.preventDefault();if (!isPreset) {// 記錄當前格子的步數const removedStep = userSteps[row][col];currentBoard[row][col] = null;userSteps[row][col] = null;// 所有步數大于 removedStep 的格子步數-1for (let r = 0; r < 9; r++) {for (let c = 0; c < 9; c++) {if (userSteps[r][c] !== null && userSteps[r][c] > removedStep) {userSteps[r][c]--;}}}stepCounter--;redCells.delete(row + ',' + col);drawBoard();}};// 左鍵在紅色與非紅色之間切換td.onclick = function (e) {if (e.button === 0) {if (!redCells.has(row + ',' + col)) {redCells.add(row + ',' + col);drawBoard();} else {redCells.delete(row + ',' + col);drawBoard();}}};} else {// 未確定，渲染9小格const miniGrid = document.createElement('div');miniGrid.className = 'sudoku-mini-grid';for (let k = 1; k <= 9; k++) {const miniCell = document.createElement('div');miniCell.className = 'mini-cell';miniCell.textContent = k;// 判斷是否可選if (isValidCell(row, col, k)) {miniCell.classList.add('black');// 左鍵點擊將該數字作為單元格值miniCell.onmousedown = function (e) {e.preventDefault();// 僅在首次確定未確定格時啟動計時if (currentBoard[row][col] === null && timerStart === null) {timerStart = Date.now();}currentBoard[row][col] = k;userSteps[row][col] = stepCounter++;drawBoard();};} else {miniCell.classList.add('gray');  // 同行、同列或同宮已出現的數字不可用}miniGrid.appendChild(miniCell);}td.appendChild(miniGrid);}tr.appendChild(td);}boardElement.appendChild(tr);}// 檢查是否全部填滿let allFilled = true;for (let row = 0; row < 9; row++) {for (let col = 0; col < 9; col++) {if (!currentBoard[row][col]) allFilled = false;}}if (allFilled) {if (timerStart !== null) {timerUsed = Math.round((Date.now() - timerStart) / 1000);setTimeout(() => { alert(`恭喜您解決了本題，共計耗時${timerUsed}秒!`); timerStart = null; }, 100);}}
}// 生成唯一解數獨新題
// 新游戲按鈕事件
// 自動生成一個唯一解的新題目，重置所有狀態
newGameBtn.addEventListener("click", async () => {// 生成唯一解數獨let puzzle;userSteps = Array.from({ length: 9 }, () => Array(9).fill(null));stepCounter = 1;do {puzzle = generateSudokuPuzzle();} while (!puzzle || countSolutions(puzzle) !== 1);originalBoard = puzzle;currentBoard = JSON.parse(JSON.stringify(originalBoard));redCells.clear();timerStart = null;drawBoard();
});// 高亮顯示唯一可用數字
// 高亮顯示所有唯一可填數字的格子
highlightUniqueBtn.addEventListener("click", () => {// 遍歷所有格子for (let row = 0; row < 9; row++) {for (let col = 0; col < 9; col++) {const cell = getUniqNumberCell(row, col);if (cell) {cell.classList.add('highlight');}}}
});// 生成完整解
// 隨機生成一個完整的數獨解（9x9的填滿且合法的盤面）
// 隨機生成一個完整的、合法的數獨解（遞歸回溯）
function generateFullSolution() {// 創建一個9x9的空棋盤，所有格子初始為nulllet board = Array.from({ length: 9 }, () => Array(9).fill(null));// 遞歸回溯填充函數，從左上角(0,0)開始function fill(row, col) {// 如果行號越界，說明已填滿整盤，返回trueif (row === 9) return true;// 計算下一個要填的格子的行列號let nextRow = col === 8 ? row + 1 : row;let nextCol = col === 8 ? 0 : col + 1;// 1~9隨機順序嘗試，增加解的多樣性let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9].sort(() => Math.random() - 0.5);for (let num of nums) {// 判斷num是否可以填入當前格（不違反數獨規則）if (isValidForBoard(board, row, col, num)) {board[row][col] = num; // 填入數字// 遞歸填下一個格子，若成功則整盤可解if (fill(nextRow, nextCol)) return true;board[row][col] = null; // 回溯，撤銷填入}}// 1~9都不行，說明此路不通，返回falsereturn false;}// 從(0,0)開始填盤fill(0, 0);return board; // 返回填好的完整解
}// 隨機挖空，生成題目
// 由完整解隨機挖空，生成唯一解題目
function generateSudokuPuzzle() {let solution = generateFullSolution();let puzzle = JSON.parse(JSON.stringify(solution));// 隨機順序挖空let cells = [];for (let r = 0; r < 9; r++) for (let c = 0; c < 9; c++) cells.push([r, c]);cells = cells.sort(() => Math.random() - 0.5);for (let i = 0; i < 60; i++) { // 最多挖60個空let [r, c] = cells[i];let backup = puzzle[r][c];puzzle[r][c] = null;// 挖空后如果解不唯一，撤回if (countSolutions(puzzle) !== 1) puzzle[r][c] = backup;}return puzzle;
}// 判斷唯一解
// 判斷給定棋盤的解的個數（遞歸回溯，計數）
function countSolutions(board) {let count = 0;let b = JSON.parse(JSON.stringify(board));function dfs() {for (let r = 0; r < 9; r++) {for (let c = 0; c < 9; c++) {if (b[r][c] === null) {for (let num = 1; num <= 9; num++) {if (isValidForBoard(b, r, c, num)) {b[r][c] = num;dfs();b[r][c] = null;if (count > 1) return;}}return;}}}count++;}dfs();return count;
}// 檢查num能否填入board[row][col]（不違反規則）
function isValidForBoard(board, row, col, num) {for (let i = 0; i < 9; i++) {if (board[row][i] === num || board[i][col] === num) return false;}const boxRow = Math.floor(row / 3) * 3;const boxCol = Math.floor(col / 3) * 3;for (let r = 0; r < 3; r++) {for (let c = 0; c < 3; c++) {if (board[boxRow + r][boxCol + c] === num) return false;}}return true;
}// 檢查num能否填入當前棋盤currentBoard[row][col]
function isValidCell(row, col, num) {for (let i = 0; i < 9; i++) {// 同行或同列已存在num，則該格中的數不可用if ((i !== col && currentBoard[row][i] === num) ||(i !== row && currentBoard[i][col] === num)) {return false;}}// 同宮中存在num，則該格中的數不可用const boxRow = Math.floor(row / 3) * 3;const boxCol = Math.floor(col / 3) * 3;for (let r = 0; r < 3; r++) {for (let c = 0; c < 3; c++) {const x = boxRow + r;const y = boxCol + c;if (x !== row && y !== col && currentBoard[x][y] === num) {return false;}}}return true;
}// “查看答案”按鈕事件
// 自動求解當前題目并展示
answerBtn.addEventListener("click", () => {userSteps = Array.from({ length: 9 }, () => Array(9).fill(null));stepCounter = 1;let solution = solveSudoku(JSON.parse(JSON.stringify(originalBoard)));if (!solution) {return;}currentBoard = solution;redCells.clear();timerStart = null;drawBoard();
});// 求解器部分（回溯算法）
// 回溯算法求解數獨，返回解或false
function solveSudoku(board) {function isValid(row, col, num) {for (let i = 0; i < 9; i++) {if (board[row][i] === num || board[i][col] === num) return false;}const boxRow = Math.floor(row / 3) * 3;const boxCol = Math.floor(col / 3) * 3;for (let r = 0; r < 3; r++) {for (let c = 0; c < 3; c++) {if (board[boxRow + r][boxCol + c] === num) return false;}}return true;}function backtrack() {for (let row = 0; row < 9; row++) {for (let col = 0; col < 9; col++) {if (board[row][col] === null) {for (let num = 1; num <= 9; num++) {if (isValid(row, col, num)) {board[row][col] = num;if (backtrack()) return true;board[row][col] = null;}}return false;}}}return true;}if (backtrack()) {return board;}return false;
}// 判斷整個棋盤是否合法（無重復數字）
function isValidSudoku(board) {const rows = Array.from({ length: 9 }, () => new Set());const cols = Array.from({ length: 9 }, () => new Set());const boxes = Array.from({ length: 9 }, () => new Set());for (let r = 0; r < 9; r++) {for (let c = 0; c < 9; c++) {const val = board[r][c];if (val === null) continue;const boxIndex = Math.floor(r / 3) * 3 + Math.floor(c / 3);if (rows[r].has(val) || cols[c].has(val) || boxes[boxIndex].has(val)) {return false;}rows[r].add(val);cols[c].add(val);boxes[boxIndex].add(val);}}return true;
}/*** 指定(row, col)中如果只有唯一可用的數字，將其高亮* @param {number} row 行號（0-8）* @param {number} col 列號（0-8）* @returns {HTMLElement|null} 唯一的可用數字所在 mini-cell元素，否則null*/
// 獲取(row, col)格唯一可填數字的mini-cell元素（若唯一）
function getUniqNumberCell(row, col) {// 獲取對應tdconst tr = boardElement.querySelectorAll('tr')[row];if (!tr) return null;const td = tr.querySelectorAll('td')[col];if (!td) return null;// 找到mini-gridconst miniGrid = td.querySelector('.sudoku-mini-grid');if (!miniGrid) return null;// 找到所有可用數字所在mini-cell。參見drawBoard()，可用數字所在mini-cell類名為blackconst blackCells = miniGrid.querySelectorAll('.mini-cell.black');if (blackCells.length === 1) {return blackCells[0];}return null;
}// 初始化9x9表格
// 初始化自定義題目輸入表格（9x9輸入框）
function initGridTable() {// 清空表格（避免重復添加）inputTtable.innerHTML = '';for (let i = 0; i < 9; i++) {const tr = document.createElement('tr');for (let j = 0; j < 9; j++) {const td = document.createElement('td');const input = document.createElement('input');input.type = 'text';input.classList.add('cell');input.maxLength = 1;// 輸入驗證：當輸入框失去焦點時驗證input.addEventListener('blur', function () {const value = this.value.trim();if (value !== '' && (value < '1' || value > '9')) {alert('請輸入1-9之間的數字！');this.value = '';}});td.appendChild(input);tr.appendChild(td);}inputTtable.appendChild(tr);}
}// 打開對話框
// 打開自定義題目輸入對話框
openBtn.addEventListener('click', () => {// 初始化表格（如果還沒有初始化的話）initGridTable();inputDialog.showModal();
});// 提交按鈕點擊事件，將輸入的數據保存到originalBoard數組中
// 提交自定義題目，校驗唯一解并作為新題載入
submitBtn.addEventListener('click', () => {let boardconst rows = inputTtable.querySelectorAll('tr');for (let i = 0; i < rows.length; i++) {const cells = rows[i].querySelectorAll('input');for (let j = 0; j < cells.length; j++) {const value = cells[j].value.trim();currentBoard[i][j] = (value === '' ? null : parseInt(value, 10));}}// 關閉輸入題目對話框inputDialog.close();if (isValidSudoku(currentBoard)) {if (countSolutions(currentBoard) === 1) {// 所出的題有且只有唯一解，初始化相關變量，開始新游戲originalBoard = JSON.parse(JSON.stringify(currentBoard));userSteps = Array.from({ length: 9 }, () => Array(9).fill(null));stepCounter = 1;redCells.clear();timerStart = null;timerUsed = 0;// 重繪盤面drawBoard();} else {  // 無解或有多個解，返回原盤面alert('此題不是有且只有唯一解');return;}} else {  // 出的題中同行、同列或同宮有相同數字，返回原盤面alert('此題不合法');return;}
});drawBoard();

本文代碼在CSDN的C知道生成的單道數獨題做題界面的代碼框架基礎上改進和增加功能而成。

使用技巧：

1、先把所有只有單個數字可用的單元格全部確定；

2、利用所掌握的技巧將所有可確定數字的單元格全部確定，技巧掌握得少不要緊，不用技巧都可以，不過花的時間稍多；

3、重復1，2，直至再沒有可確定的單元格，然后選擇只有兩個數字的單元格，隨便選一個數，然后再點擊讓它變紅，然后又重復1、2步；

4、出現某個單元格無數字可填的時候，撤銷到上一步標記紅色的單元格中的步數，然后換該單元格中的另一個數，這次不用標記紅色了，然后重復1，2，3。如果所有單元格都至少有兩個數字可填，按步驟3的做法在只有兩個候選數的單元格中隨便選一個，標記紅色，然后重復1、2步。出現第4步第一種情形，撤銷到后一個紅色標記單元格中的步數，再重復1，2，3，4步，直至完成。