帮我写个html 数独小游戏
时间: 2023-08-17 20:09:49 浏览: 135
当然可以帮你写一个 HTML 数独小游戏!下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>数独游戏</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 30px;
height: 30px;
text-align: center;
border: 1px solid black;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>数独游戏</h1>
<table id="sudoku">
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<!-- 其他行省略 -->
</table>
<button onclick="solveSudoku()">解答</button>
<button onclick="resetSudoku()">重置</button>
<script>
function solveSudoku() {
// 获取表格元素
const table = document.getElementById("sudoku");
// 创建一个二维数组来存储数独的初始值
let sudoku = [];
for (let i = 0; i < table.rows.length; i++) {
sudoku[i] = [];
for (let j = 0; j < table.rows[i].cells.length; j++) {
const cell = table.rows[i].cells[j];
sudoku[i][j] = cell.innerText !== "" ? parseInt(cell.innerText) : 0;
}
}
// 调用数独求解函数
solve(sudoku, 0, 0);
// 将结果更新回表格
for (let i = 0; i < table.rows.length; i++) {
for (let j = 0; j < table.rows[i].cells.length; j++) {
const cell = table.rows[i].cells[j];
cell.innerText = sudoku[i][j];
}
}
}
function solve(sudoku, row, col) {
if (row === 9) {
return true;
}
if (col === 9) {
return solve(sudoku, row + 1, 0);
}
if (sudoku[row][col] !== 0) {
return solve(sudoku, row, col + 1);
}
for (let num = 1; num <= 9; num++) {
if (isValid(sudoku, row, col, num)) {
sudoku[row][col] = num;
if (solve(sudoku, row, col + 1)) {
return true;
}
sudoku[row][col] = 0;
}
}
return false;
}
function isValid(sudoku, row, col, num) {
for (let i = 0; i < 9; i++) {
if (sudoku[row][i] === num || sudoku[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 (sudoku[startRow + i][startCol + j] === num) {
return false;
}
}
}
return true;
}
function resetSudoku() {
const table = document.getElementById("sudoku");
for (let i = 0; i < table.rows.length; i++) {
for (let j = 0; j < table.rows[i].cells.length; j++) {
const cell = table.rows[i].cells[j];
cell.innerText = "";
}
}
}
</script>
</body>
</html>
```
这段代码创建了一个 9x9 的表格用于显示数独游戏的格子,单元格具有 `contenteditable` 属性,允许用户输入数字。在点击"解答"按钮后,使用回溯算法来求解数独并在表格中显示结果。点击"重置"按钮会清空表格内容。
请将上述代码保存为一个 HTML 文件,然后在浏览器中打开该文件,你就可以玩数独游戏了!希望对你有所帮助!
阅读全文