好的,我可以帮你实现一个简单的网页数独小游戏。以下是基本的 HTML、CSS 和 JavaScript 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数独小游戏</title>
<style>
table {
border-collapse: collapse;
margin: 0 auto;
}
td {
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
border: 1px solid #ccc;
}
input {
width: 100%;
height: 100%;
font-size: 20px;
font-weight: bold;
text-align: center;
border: none;
outline: none;
}
.correct {
background-color: #cfc;
}
.incorrect {
background-color: #fcc;
}
</style>
</head>
<body>
<h1>数独小游戏</h1>
<table id="sudoku">
<tbody>
<tr>
<td><input type="text" maxlength="1"></td>
<td><input type="text" maxlength="1"></td>
<td><input type="text" maxlength="1"></td>
<td><input type="text" maxlength="1"></td>
<td><input type="text" maxlength="1"></td>
<td><input type="text" maxlength="1"></td>
<td><input type="text" maxlength="1"></td>
<td><input type="text" maxlength="1"></td>
<td><input type="text" maxlength="1"></td>
</tr>
<!-- 其他行省略 -->
</tbody>
</table>
<br>
<button id="check">检查</button>
<button id="reset">重置</button>
<script>
// 数独谜题
var puzzle = [
[5, 3, '', '', 7, '', '', '', ''],
[6, '', '', 1, 9, 5, '', '', ''],
['', 9, 8, '', '', '', '', 6, ''],
[8, '', '', '', 6, '', '', '', 3],
[4, '', '', 8, '', 3, '', '', 1],
[7, '', '', '', 2, '', '', '', 6],
['', 6, '', '', '', '', 2, 8, ''],
['', '', '', 4, 1, 9, '', '', 5],
['', '', '', '', 8, '', '', 7, 9]
];
// 填充谜题
var table = document.getElementById('sudoku');
for (var i = 0; i < 9; i++) {
var row = table.rows[i];
for (var j = 0; j < 9; j++) {
var cell = row.cells[j];
if (puzzle[i][j] !== '') {
cell.innerHTML = '<input type="text" value="' + puzzle[i][j] + '" readonly>';
} else {
cell.innerHTML = '<input type="text" maxlength="1">';
}
}
}
// 检查答案
document.getElementById('check').onclick = function() {
var rows = table.rows;
var values = [];
for (var i = 0; i < 9; i++) {
var row = rows[i];
var rowValues = [];
for (var j = 0; j < 9; j++) {
var cell = row.cells[j];
rowValues.push(cell.firstChild.value);
}
values.push(rowValues);
}
var isCorrect = true;
for (var i = 0; i < 9; i++) {
// 检查每行
if (!checkArray(values[i])) {
isCorrect = false;
highlightIncorrect(rows[i].cells);
}
// 检查每列
var columnValues = [];
for (var j = 0; j < 9; j++) {
columnValues.push(values[j][i]);
}
if (!checkArray(columnValues)) {
isCorrect = false;
var cells = [];
for (var j = 0; j < 9; j++) {
cells.push(rows[j].cells[i]);
}
highlightIncorrect(cells);
}
// 检查每宫
var boxValues = [];
var x = Math.floor(i / 3) * 3;
var y = (i % 3) * 3;
for (var j = x; j < x + 3; j++) {
for (var k = y; k < y + 3; k++) {
boxValues.push(values[j][k]);
}
}
if (!checkArray(boxValues)) {
isCorrect = false;
var cells = [];
for (var j = x; j < x + 3; j++) {
for (var k = y; k < y + 3; k++) {
cells.push(rows[j].cells[k]);
}
}
highlightIncorrect(cells);
}
}
if (isCorrect) {
alert('恭喜你,答案正确!');
}
};
// 重置谜题
document.getElementById('reset').onclick = function() {
var inputs = table.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = '';
inputs[i].className = '';
}
};
// 检查数组是否合法
function checkArray(array) {
var values = [];
for (var i = 0; i < array.length; i++) {
var value = array[i];
if (value !== '') {
if (values.indexOf(value) === -1) {
values.push(value);
} else {
return false;
}
}
}
return true;
}
// 高亮不正确的单元格
function highlightIncorrect(cells) {
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.firstChild.className = 'incorrect';
}
}
</script>
</body>
</html>
```
这个数独小游戏基本上就是一个标准的 9x9 的数独谜题,其中一些单元格已经填好了数字,其他的单元格需要玩家填上数字。玩家可以点击“检查”按钮来检查答案是否正确,如果有错误的话,不正确的单元格会被高亮显示。如果所有的答案都正确,会弹出一个恭喜的对话框。玩家还可以点击“重置”按钮来重新开始游戏。