1000字范文 > 九宫格数独游戏

九宫格数独游戏

时间：2023-07-26 03:50:50

相关推荐

九宫格数独游戏

一个九宫格数独游戏，以下是思路和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><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，6var 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();var zz=0;for (i=0;i<9;i++){zz=shuzu2[i][sj+y];shuzu2[i][sj+y]=shuzu2[i][((sj+1)%3)+y];shuzu2[i][((sj+1)%3)+y]=zz;}}function quanhengmix2(shuzu2){hengmix2(shuzu2,0);zongmix2(shuzu2,3);zongmix2(shuzu2,6);}//1.5九大格横向打乱function dahengmix2(shuzu2){var sj=0;sj=suiji2();var dagesj=(sj*3);//大格之间行距为3,dagesui的值为0，3，6var zz=0;for (j=0;j<3;j++){for (i=0;i<9;i++){zz=shuzu2[i][dagesj+j];shuzu2[i][dagesj+j]=shuzu2[i][(dagesj+3+j)%9];shuzu2[i][(dagesj+3+j)%9]=zz;}}}//1.5多次打乱function hunhe2(shuzu2){for (k=0;k<15;k++)//这里不能用i{quanzongmix2(shuzu2);dazongmix2(shuzu2);quanhengmix2(shuzu2);dahengmix2(shuzu2);}}//2.答案数组生成//2.1生成数独表原型数组var shuzu2 = new Array();shuzu2[0] = new Array();shuzu2[0]=[1,2,3,4,5,6,7,8,9];shuzu2[1] = new Array();shuzu2[1]=[4,5,6,7,8,9,1,2,3];shuzu2[2] = new Array();shuzu2[2]=[7,8,9,1,2,3,4,5,6];shuzu2[3] = new Array();shuzu2[3]=[2,3,1,5,6,4,8,9,7];shuzu2[4] = new Array();shuzu2[4]=[5,6,4,8,9,7,2,3,1];shuzu2[5] = new Array();shuzu2[5]=[8,9,7,2,3,1,5,6,4];shuzu2[6] = new Array();shuzu2[6]=[3,1,2,6,4,5,9,7,8];shuzu2[7] = new Array();shuzu2[7]=[6,4,5,9,7,8,3,1,2];shuzu2[8] = new Array();shuzu2[8]=[9,7,8,3,1,2,6,4,5];//2.2原型数组打乱生成答案数组hunhe2(shuzu2);//3.显示控制xk2数组（用于控制哪些位置显示已知数）//3.1生成原型控制数组（数字1的多少即可调节难度）var xk2 = new Array();xk2[0] = new Array();xk2[0]=[1,0,0,1,0,1,0,1,0];xk2[1] = new Array();xk2[1]=[0,0,1,0,1,0,1,0,0];xk2[2] = new Array();xk2[2]=[0,1,0,0,0,0,0,0,1];xk2[3] = new Array();xk2[3]=[1,0,0,1,1,0,0,0,1];xk2[4] = new Array();xk2[4]=[0,1,1,1,0,0,1,0,0];xk2[5] = new Array();xk2[5]=[1,0,0,1,0,0,0,1,1];xk2[6] = new Array();xk2[6]=[0,0,1,0,1,1,0,1,0];xk2[7] = new Array();xk2[7]=[1,1,1,0,0,1,0,1,0];xk2[8] = new Array();xk2[8]=[1,0,0,1,0,0,1,0,0];//3.2打乱生成实际控制数组hunhe2(xk2);//4.显示xs2在网页中的已知数导入（原理：控制数组为1的点对应答案数组点的数据显示出来）//4.1合成id号（字符串拼接函数）function hcid2(x, y) {var idhao2="txtnine"+x+y;return idhao2;}//4.2已知数导入以及对应文本框只读锁定function xs2(){window.onload=function()//onload可以使得js可以在网页打开时就将表格内含的值改变{for (i=0;i<9;i++){ for (j=0;j<9;j++){if (xk2[i][j]==1){var str=hcid2(i,j);document.getElementById(str).value=shuzu2[i][j];document.getElementById(str).readOnly = true;//readOnly为true则这个文本框只读}} }};}xs2();//5.提取数字正确判断分析（暂时先使用与标准答案是否相同的算法，因为数组小，到时候正式九宫格可能要用，数字不重复且范围内，且相加和为45）//5.1文本框填入数字提取函数function ds2(shuzi){ //第一种方法 var temp=document.getElementById(shuzi).value; //注意引号内的内容应该是文本框的id而不能是name return temp; }//5.2与正确答案比较函数var zw2=0;//正误控制变量初始化function zhengwu2(tianxie2){zw2=0;//函数每次运行前初始化，这样第二次做题才有意义for (i=0;i<9;i++){ for (j=0;j<9;j++){if (tianxie2[i][j]!=shuzu2[i][j]){ zw2=1; //若有不同正误控制变量赋值为1}} }}//5.3答题者填入答案初始化var tianxie2 = new Array();for (i=0;i<9;i++){tianxie2[i] = new Array(9);}//5.4答题者填入答案填入function yiqi2(){for (i=0;i<9;i++){ for (j=0;j<9;j++){var zhanshiid2=hcid2(i, j);tianxie2[i][j]=ds2(zhanshiid2);}}} //5.5第五部分函数整体激活函数function panduan2(){yiqi2();zhengwu2(tianxie2);if(zw2==1){alert("填错了");}else{alert("恭喜全对");}}//6.文本框输入控制函数(由于知识有限实现控制输入的方式比较低级)function kongzi2(idcode){//获取该id对应的objectvar temp=document.getElementById(idcode);//id的i大写//不准输入数字以外的数temp.value=temp.value.replace(/[^\d]/g,'');//js正则语法:/正则表达式主体/修饰符(可选)//输入数字控制a=parseInt(temp.value);//不准输入0if(a==0){temp.value = '';}//只能输入一位数，且后输的数会取代前输的数 if(a>9){temp.value = a%10;}}//不使用object.onkeyup，100X100更简单，但在9宫格比较麻烦//7.答案显示函数（点击按钮后答案出现在文本框内）function daan2(){for (i=0;i<9;i++){ for (j=0;j<9;j++){ var str=hcid2(i,j);document.getElementById(str).value=shuzu2[i][j]; } }alert("答案可能不唯一，这只是一种答案");}//8.新的一题（同过页面刷新实现）function xinti2(){alert("代码编写者：周宇森");location.reload();}</script></head><body><div class="divgs" id="sigongge"><div style="text-align:center"><p>困难模式</p><p>规则：根据已给的数字，将所有空格填上数字，要求每行每列以及九个小九宫格内都要有1-9</p></div><form name="form1" id="form2" method="post"> <table border="1" class="tablegs"><tr> <th><input type="text" name="c1" id="txtnine00" class="wbk" onkeyup="kongzi2('txtnine00')"></th><th><input type="text" name="c1" id="txtnine01" class="wbk" onkeyup="kongzi2('txtnine01')"></th><th><input type="text" name="c1" id="txtnine02" class="wbk" onkeyup="kongzi2('txtnine02')"></th><th><input type="text" id="txtnine03" class="wbk" onkeyup="kongzi2('txtnine03')"></th><th><input type="text" id="txtnine04" class="wbk" onkeyup="kongzi2('txtnine04')"></th><th><input type="text" id="txtnine05" class="wbk" onkeyup="kongzi2('txtnine05')"></th><th><input type="text" name="c1" id="txtnine06" class="wbk" onkeyup="kongzi2('txtnine06')"></th><th><input type="text" name="c1" id="txtnine07" class="wbk" onkeyup="kongzi2('txtnine07')"></th><th><input type="text" name="c1" id="txtnine08" class="wbk" onkeyup="kongzi2('txtnine08')"></th></tr> <tr><th><input type="text" name="c1" id="txtnine10" class="wbk" onkeyup="kongzi2('txtnine10')"></th><th><input type="text" name="c1" id="txtnine11" class="wbk" onkeyup="kongzi2('txtnine11')"></th><th><input type="text" name="c1" id="txtnine12" class="wbk" onkeyup="kongzi2('txtnine12')"></th><th><input type="text" id="txtnine13" class="wbk" onkeyup="kongzi2('txtnine13')"></th><th><input type="text" id="txtnine14" class="wbk" onkeyup="kongzi2('txtnine14')"></th><th><input type="text" id="txtnine15" class="wbk" onkeyup="kongzi2('txtnine15')"></th><th><input type="text" name="c1" name="c1" id="txtnine16" class="wbk" onkeyup="kongzi2('txtnine16')"></th><th><input type="text" name="c1" id="txtnine17" class="wbk" onkeyup="kongzi2('txtnine17')"></th><th><input type="text" name="c1" id="txtnine18" class="wbk" onkeyup="kongzi2('txtnine18')"></th></tr><tr><th><input type="text" name="c1" id="txtnine20" class="wbk" onkeyup="kongzi2('txtnine20')"></th><th><input type="text" name="c1" id="txtnine21" class="wbk" onkeyup="kongzi2('txtnine21')"></th><th><input type="text" name="c1" id="txtnine22" class="wbk" onkeyup="kongzi2('txtnine22')"></th><th><input type="text" id="txtnine23" class="wbk" onkeyup="kongzi2('txtnine23')"></th><th><input type="text" id="txtnine24" class="wbk" onkeyup="kongzi2('txtnine24')"></th><th><input type="text" id="txtnine25" class="wbk" onkeyup="kongzi2('txtnine25')"></th><th><input type="text" name="c1" id="txtnine26" class="wbk" onkeyup="kongzi2('txtnine26')"></th><th><input type="text" name="c1" id="txtnine27" class="wbk" onkeyup="kongzi2('txtnine27')"></th><th><input type="text" name="c1" id="txtnine28" class="wbk" onkeyup="kongzi2('txtnine28')"></th></tr><tr><th><input type="text" id="txtnine30" class="wbk" onkeyup="kongzi2('txtnine30')"></th><th><input type="text" id="txtnine31" class="wbk" onkeyup="kongzi2('txtnine31')"></th><th><input type="text" id="txtnine32" class="wbk" onkeyup="kongzi2('txtnine32')"></th><th><input type="text" name="c1" id="txtnine33" class="wbk" onkeyup="kongzi2('txtnine33')"></th><th><input type="text" name="c1" id="txtnine34" class="wbk" onkeyup="kongzi2('txtnine34')"></th><th><input type="text" name="c1" id="txtnine35" class="wbk" onkeyup="kongzi2('txtnine35')"></th><th><input type="text" id="txtnine36" class="wbk" onkeyup="kongzi2('txtnine36')"></th><th><input type="text" id="txtnine37" class="wbk" onkeyup="kongzi2('txtnine37')"></th><th><input type="text" id="txtnine38" class="wbk" onkeyup="kongzi2('txtnine38')"></th></tr><tr><th><input type="text" id="txtnine40" class="wbk" onkeyup="kongzi2('txtnine40')"></th><th><input type="text" id="txtnine41" class="wbk" onkeyup="kongzi2('txtnine41')"></th><th><input type="text" id="txtnine42" class="wbk" onkeyup="kongzi2('txtnine42')"></th><th><input type="text" name="c1" id="txtnine43" class="wbk" onkeyup="kongzi2('txtnine43')"></th><th><input type="text" name="c1" id="txtnine44" class="wbk" onkeyup="kongzi2('txtnine44')"></th><th><input type="text" name="c1" id="txtnine45" class="wbk" onkeyup="kongzi2('txtnine45')"></th><th><input type="text" id="txtnine46" class="wbk" onkeyup="kongzi2('txtnine46')"></th><th><input type="text" id="txtnine47" class="wbk" onkeyup="kongzi2('txtnine47')"></th><th><input type="text" id="txtnine48" class="wbk" onkeyup="kongzi2('txtnine48')"></th></tr><tr><th><input type="text" id="txtnine50" class="wbk" onkeyup="kongzi2('txtnine50')"></th><th><input type="text" id="txtnine51" class="wbk" onkeyup="kongzi2('txtnine51')"></th><th><input type="text" id="txtnine52" class="wbk" onkeyup="kongzi2('txtnine52')"></th><th><input type="text" name="c1" id="txtnine53" class="wbk" onkeyup="kongzi2('txtnine53')"></th><th><input type="text" name="c1" id="txtnine54" class="wbk" onkeyup="kongzi2('txtnine54')"></th><th><input type="text" name="c1" id="txtnine55" class="wbk" onkeyup="kongzi2('txtnine55')"></th><th><input type="text" id="txtnine56" class="wbk" onkeyup="kongzi2('txtnine56')"></th><th><input type="text" id="txtnine57" class="wbk" onkeyup="kongzi2('txtnine57')"></th><th><input type="text" id="txtnine58" class="wbk" onkeyup="kongzi2('txtnine58')"></th></tr><tr><th><input type="text" name="c1" id="txtnine60" class="wbk" onkeyup="kongzi2('txtnine60')"></th><th><input type="text" name="c1" id="txtnine61" class="wbk" onkeyup="kongzi2('txtnine61')"></th><th><input type="text" name="c1" id="txtnine62" class="wbk" onkeyup="kongzi2('txtnine62')"></th><th><input type="text" id="txtnine63" class="wbk" onkeyup="kongzi2('txtnine63')"></th><th><input type="text" id="txtnine64" class="wbk" onkeyup="kongzi2('txtnine64')"></th><th><input type="text" id="txtnine65" class="wbk" onkeyup="kongzi2('txtnine65')"></th><th><input type="text" name="c1" id="txtnine66" class="wbk" onkeyup="kongzi2('txtnine66')"></th><th><input type="text" name="c1" id="txtnine67" class="wbk" onkeyup="kongzi2('txtnine67')"></th><th><input type="text" name="c1" id="txtnine68" class="wbk" onkeyup="kongzi2('txtnine68')"></th></tr><tr><th><input type="text" name="c1" id="txtnine70" class="wbk" onkeyup="kongzi2('txtnine70')"></th><th><input type="text" name="c1" id="txtnine71" class="wbk" onkeyup="kongzi2('txtnine71')"></th><th><input type="text" name="c1" id="txtnine72" class="wbk" onkeyup="kongzi2('txtnine72')"></th><th><input type="text" id="txtnine73" class="wbk" onkeyup="kongzi2('txtnine73')"></th><th><input type="text" id="txtnine74" class="wbk" onkeyup="kongzi2('txtnine74')"></th><th><input type="text" id="txtnine75" class="wbk" onkeyup="kongzi2('txtnine75')"></th><th><input type="text" name="c1" id="txtnine76" class="wbk" onkeyup="kongzi2('txtnine76')"></th><th><input type="text" name="c1" id="txtnine77" class="wbk" onkeyup="kongzi2('txtnine77')"></th><th><input type="text" name="c1" id="txtnine78" class="wbk" onkeyup="kongzi2('txtnine78')"></th></tr><tr><th><input type="text" name="c1" id="txtnine80" class="wbk" onkeyup="kongzi2('txtnine80')"></th><th><input type="text" name="c1" id="txtnine81" class="wbk" onkeyup="kongzi2('txtnine81')"></th><th><input type="text" name="c1" id="txtnine82" class="wbk" onkeyup="kongzi2('txtnine82')"></th><th><input type="text" id="txtnine83" class="wbk" onkeyup="kongzi2('txtnine83')"></th><th><input type="text" id="txtnine84" class="wbk" onkeyup="kongzi2('txtnine84')"></th><th><input type="text" id="txtnine85" class="wbk" onkeyup="kongzi2('txtnine85')"></th><th><input type="text" name="c1" id="txtnine86" class="wbk" onkeyup="kongzi2('txtnine86')"></th><th><input type="text" name="c1" id="txtnine87" class="wbk" onkeyup="kongzi2('txtnine87')"></th><th><input type="text" name="c1" id="txtnine88" class="wbk" onkeyup="kongzi2('txtnine88')"></th></tr></table><div style="text-align:center"><input type="button" value="点击提交" onclick="panduan2()" class="angs" ></div><div style="text-align:center"><input type="button" value="显示答案" onclick="daan2()" class="angs" ></div><div style="text-align:center"><input type="button" value="新的一题" onclick="xinti2()" class="angs" ></div></form></div> </body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。