简单的数独游戏四宫格含答案
body {
fontfamily: Arial, sansserif;
margin: 20px;
}
h2 {
textalign: center;
marginbottom: 30px;
}
.gameboard {
display: grid;
gridtemplatecolumns: repeat(9, 90px);
gridgap: 5px;
border: 1px solid ccc;
padding: 10px;
}
.number {
backgroundcolor: f2f2f2;
border: 1px solid ccc;
textalign: center;
cursor: pointer;
}
.solution {
backgroundcolor: lightgreen;
textalign: center;
cursor: default;
}
.指导 {
margintop: 20px;
fontweight: bold;
}
数独是一种经典的逻辑谜题,下面我们将教你如何创建一个简单的数独游戏。我们需要一个9x9的网格,每个格子可以填入19的数字,且同一行、同一列和同一宫格内不能有重复数字。以下是步骤指南:
1. 创建游戏板
使用HTML的grid布局创建一个9x9的表格,每个单元格设置为`.number`类,初始时所有单元格都为可点击状态:
```html
%for i in range(9):
%for j in range(9):
%endfor
%endfor
```
为每个单元格添加数据属性`datavalue`,存储数字,以便在点击时获取。
2. 验证规则
添加一个函数,检查输入的数字是否符合数独规则。你可以使用JavaScript实现,例如使用一个二维数组来存储已填入的数字,然后遍历检查重复:
```javascript
function isValidValue(value, row, col) {
// 检查行
for (let i = 0; i < 9; i ) {
if (board[row][i] === value) {
return false;
}
}
// 检查列
for (let j = 0; j < 9; j ) {
if (board[j][col] === value) {
return false;
}
}
// 检查宫格(3x3区域)
let boxRow = Math.floor(row / 3) * 3;
let boxCol = Math.floor(col / 3) * 3;
for (let i = boxRow; i < boxRow 3; i ) {
for (let j = boxCol; j < boxCol 3; j ) {
if (board[i][j] === value) {
return false;
}
}
}
return true;
}
```
3. 游戏逻辑
当用户点击一个格子时,检查该值是否有效,如果有效则填充,无效则提示错误。可以添加一个按钮或事件监听器来触发这个逻辑:
```javascript
document.addEventListener('click', function(event) {
const value = parseInt(event.target.getAttribute('datavalue'));
const row = Math.floor(event.target.offsetTop / 36);
const col = Math.floor(event.target.offsetLeft / 36);
if (isValidValue(value, row, col)) {
board[row][col] = value;
// 清除已填入的数字,防止重复
event.target.classList.add('solution');
// 如果所有格子都填好,显示解决方案
if (checkCompletion(board)) {
alert('恭喜,数独完成!');
}
} else {
alert('输入无效,请重新填写。');
}
});
```
4. 检查完成
创建一个辅助函数`checkCompletion`来检查数独是否完成,即所有格子都填入了19的数字:
```javascript
function checkCompletion(board) {
for (let i = 0; i < 9; i ) {
for (let j = 0; j < 9; j ) {
if (board[i][j] === '') {
return false;
}
}
}
return true;
}
```
5. 提示与交互
为了增强用户体验,可以添加一些提示功能,比如显示已填入的数字、显示已填好的格子等。你还可以考虑添加一个按钮,让用户可以重置数独:
```html
```
添加一个事件监听器,当点击重置按钮时,清空游戏板:
```javascript
document.getElementById('resetbutton').addEventListener('click', function() {
board = Array(9).fill(null).map(() => Array(9).fill(''));
document.querySelectorAll('.number').forEach(cell => cell.classList.remove('solution'));
});
```
现在你已经创建了一个简单的数独游戏。你可以根据需要添加更多的功能,比如动画效果、更复杂的数独模式等。记得在实际项目中,为了防止用户直接访问JavaScript代码,可以考虑将逻辑封装在纯HTML和CSS中,或者使用一些前端框架如React或Vue来实现。