九宫格数独游戏
一个九宫格数独游戏，以下是思路和html文件，由于水平有限没有使用什么比较高级的语法，都是一些基础的东西，所以代码比较长。
逻辑思路
1.生成数独游戏
思路是把数独理解成一个二维数组，只要每次游戏开始随机生成一个符合九宫格规则的9*9二维数组即可。（如果不随机就可以记答案，游戏就没意思了）
1.1输入原型数组，这个数组要符合规则
1.2打乱这个数组生成答案数组：使用能保持数组符合规则的打乱方式。比如我用的是1-3，4-6，7-9列以竖排为单位先各自内部打乱，再1-3，4-6，7-9，三个竖排为单位换位置，行的打乱方式也是同理。这种打乱方式可以让原数组的一个位置的数，可能出现在答案数组的任何一个位置，同时每次变换后，数组都符合九宫格规则
2.网页显示
两个问题：一是如何确定显示哪些已知数，二是以何种方式显示在网页中
2.1选已知数：其实可以理解为随机的选一些位置（数独游戏的已知数位置是可以变得），并将位置对应的答案数组中的数显示出来。这里我使用了9*9的控制数组，控制数组打乱后，凡是为1的位置，对应答案数组的数就要显示
2.1.1生成控制数组
例
[0,1,0,0]
[0,1,0,1]
[1,0,1,0]
[0,0,0,1]
这只一个4*4的例子而已，可以根据难度的需要调节1的数量
2.1.2打乱控制数组生成实际控制数组（目的是使已知数显示位置随机，且不会集聚）
使用1.2的打乱方式，只要初始控制数组每个单元格都有1，这个方式就不会出现1的位置聚在一起的情况。
2.2显示方式
2.2.1框架
我使用了在表格（table）中嵌套文本框的形式，这样的好处是后面容易获取填写的数据参与正误判断，且表格容易实现九宫格的效果，我无需添加许多css样式。
2.2.2已知数显示
控制数组为1的位置对应的表格位置内的文本框，value值设为对应答案数组值的，同时将这个文本框设为只读，这样文本框可以显示固定的已知值，玩家不能修改那个单元格
3.输入控制
限制只能输入一个数字1-9
实现：先正则表达式限制数字以外的东西，一旦输入onkeyup调用函数将value刷回为空
然后将输入数字parseInt，若为0，刷回空字符，若大于9，则%10取余
4.正误判断
我使用getelementId等方法，获取文本框的value，然后生成一个玩家数组，和答案数组进行是否相等的方式比较
具体实现：两个for循环，以及正误控制变量k，初始化为0，如果有一个位置数不相等，将k赋值为1，若循环结束后，k为1，则显示答错了，若k仍为0则显示恭喜答对了
5.答案显示
功能：这个功能是按下一个按钮后，所有文本框会显示答案，原理是调用onclick激活一个函数，用两个for循环，将9*9的答案刷如文本框的value
6.一些提升体验的功能
6.1再来一题功能，按钮onclick调用重新加载网页的函数
6.2难度选择功能，使用隐藏部分div，来实现四宫格和九宫格的各自出现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>数独游戏</title>
<style type="text/css">
/*1.格式，使用类选择器（对应class）*/
/*1.1文本框格式*/
.wbk{
width:50px;
height:50px;
text-align:center;/*格式是把style="width:50px; height:50px;text-align:center"内的东西移出来*/
}
/*1.2div格式*/
.divgs{
width:500px;
height:600px;
background-color: rgba(0,0,0,0.1);/*前三位表示颜色，最后一位表示透明度*/
margin:0 auto;/*设置margin，第一个参数表示顶部的距离为0，而第二个auto表示的是自动,即自动根据网页来居中。*/
}
/*1.3table格式*/
.tablegs{
width:200px;
height:200px;
background-color: rgba(0,255,0,0.1);/*前三位表示颜色，最后一位表示透明度*/
margin:0 auto;/*设置margin，第一个参数表示顶部的距离为0，而第二个auto表示的是自动,即自动根据网页来居中。*/
}
/*1.4按钮格式*/
.angs{
width:100px;
height:50px;
background-color: rgba(0,0,255,0.1);/*前三位表示颜色，最后一位表示透明度*/
margin:220 auto;/*设置margin，第一个参数表示顶部的距离为0，而第二个auto表示的是自动,即自动根据网页来居中。*/
}
/*1.4表格一个的格式*/
.xgs{
background-color: rgba(255,0,0,0.1);/*前三位表示颜色，最后一位表示透明度*/
}
/*2.属性选择器*/
/*用name为属性*/
input[name="c1"]
{
background-color: rgba(255,255,51,1);;
}
</style>
<!--js代码-->
<script language="javascript">
//1.弄乱数组函数
//1.1随机数生成：生成0-2范围内的整数
function suiji2(){
var a=0;
a=parseInt(Math.random()*10000);
var b=0;
b=a%3;
return b;
}
//1.2小九宫格内纵向打乱:横向9个不动，纵向0-2，3-5，6-8内部序号互换
function zongmix2(shuzu2,x){//x负责调控0-2，3-5，6-8，第一个九宫格x为0，第二个x为3，第三个x为6，横向的y同理
var sj=0;
sj=suiji2();
var zhongzhuan=new Array();
zhongzhuan=shuzu2[sj+x];
shuzu2[sj+x]=shuzu2[((sj+1)%3)+x];
shuzu2[((sj+1)%3)+x]=zhongzhuan;
}
function quanzongmix2(shuzu2){
zongmix2(shuzu2,0);
zongmix2(shuzu2,3);
zongmix2(shuzu2,6);
}
//1.3九大格纵向打乱：横向9个不动，0-2与3-5与6-8，3行为单位互换
function dazongmix2(shuzu2){
var sj=0;
sj=suiji2();
var dagesj=(sj*3);//大格之间行距为3,dagesui的值为0，3，6
var zhongzhuan=new Array();;
for (i=0;i<3;i++){
zhongzhuan=shuzu2[dagesj+i];
shuzu2[dagesj+i]=shuzu2[(dagesj+3+i)%9];
shuzu2[(dagesj+3+i)%9]=zhongzhuan;
}
}
//1.4小九宫格内横向打乱：纵向9个不动，横向0-2，3-5，6-8内部序号互换
function hengmix2(shuzu2,y)
{
var sj=0;
sj=suiji2(
最低0.47元/天 解锁文章
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
