你的位置:首页 > Java教程

[Java教程]简易版九宫格相加数值相等


九宫格的样子以及游戏想大家接触过,想当年也是玩了好多九宫格游戏,其中最经典的就是1-9这九个数字填进格子,横竖向、对角相加数值相等这个益智游戏了。今天,在一个qq群里有人问九宫格做法,我就突然想起干前端这么长时间还真的没做过九宫格。今天就把我做好的实例发上来,供看客们批评教育。当然这也是我的处女帖,好激动!

源码下载:http://files.cnblogs.com/files/web-cxn/%E4%B9%9D%E5%AE%AB%E6%A0%BC%E6%BA%90%E7%A0%81.rar

实现思路:

1、每个格子输入的数值必须为数字;

2、输入数值不能重复;

3、输入数值不能小于1或大于9;

4、数值不能为空;

5、相加方式共8个,分别为横向三个、纵向三个、两条对角线两个值。详情如下:

    

       以每个格子所标记序号为标识:

      横向三个值:0-2,3-4,6-8;

      纵向三个值:[0,3,6]、[1,4,7]、[2,5,8];

      对角线两个值:[0,4,8]、[2,4,6]

 

 

 

 

实现过程:

很简单,和上面图片一样,点击提交按钮开始判断。

1、布局

html部分:

 1 <div class="box"> 2   <input type="text"> 3   <input type="text"> 4   <input type="text"> 5   <input type="text"> 6   <input type="text"> 7   <input type="text"> 8   <input type="text"> 9   <input type="text">10   <input type="text">11   <button>提交</button>12 </div>

css部分:通过css3中属性实现。

 1 *{margin:0;padding:0;outline: none;} 2 html,body{ 3   height: 100%; 4   display: flex; 5   justify-content: center; 6   align-items: center; 7 } 8 .box{ 9   position: relative;10   width: 250px;11   margin:0 auto;12 }13 input{14   text-align: center;15   font: 40px/60px 'Microsoft YaHei';16   width: 30%;17   float:left;18   box-sizing:border-box19 }20 button{21   position: absolute;22   bottom:-30px;23   left: 50%;24   margin-left: -30px;25   width: 40px;26 }

 

2、接下来重点来了,js部分

之前已经说了js的实现的方法,一下是相关代码。

 1 var oBtn=document.getElementsByTagName('button')[0], 2   aInp=document.getElementsByTagName('input'); 3 function isNum(){ 4   var aTemp=[];//创建临时函数,一次存放九宫格中的数字 5   for(i=0;i<aInp.length;i++) 6   { 7   var val=Number(aInp[i].value); 8   if(isNaN(val) || val<1 || val>9) {//判断当前输入框中数值是否是数字,是否小于1,是否大于9? 9     alert('1、您只能输入1-9纯数字;2、不能为空;');10     return false;//若满足任意一条件直接退出函数不往下走11   }12   for(s=0;s<aTemp.length;s++){//循环判断九宫格内是否有重复数值,若是有重复直接推出函数13     if(val == aTemp[s]){14       alert('不能重复输入!');15       return false;16     }17   }18   //上述判断都满足,则将当前val的值放到数组aTemp中19   aTemp.push(val);20   }21   //n后面所跟数字与上面图片每个格子标记的数值一致22   //将横向与纵向的值设置为0;其中n1-n3为横向三个值,n4-n6为纵向三个值23   var n1=0,n2=0,n3=0,n4=0,n5=0,n6=0,24   //n7、n8分别为两对角值25   n7=aTemp[0]+aTemp[4]+aTemp[8],26   n8=aTemp[2]+aTemp[4]+aTemp[6];27   //横向:分段相加值28   for(i=0;i<3;i++)n1+=aTemp[i];29   for(i=3;i<6;i++)n2+=aTemp[i];30   for(i=6;i<9;i++)n3+=aTemp[i];31   //纵向:因为纵向是每隔两个格子相加一次,所以正好用取模方式计算32   33   for(i=0;i<9;i++){34   (i%3==0) && (n4+=aTemp[i]);//当i%3=0时,分别为格子0、3、635   (i%3==1) && (n5+=aTemp[i]);//当i%3=1时,分别为格子1、4、736   (i%3==2) && (n6+=aTemp[i]);//当i%3=1时,分别为格子2、5、837   }38   //判断n1-n8各值是否都相等,当然可以任意一个n判断,不局限只与n1的值相等39   n1==n2 && n1==n3 && n1==n4 && n1==n5 && n1==n6 && n1==n7 && n1==n8 ? alert('恭喜您输入正确!') : alert('很遗憾您输入错误!');40 }41 oBtn.onclick=isNum;

 

执行效果

  1、当输入数值为非数字,或大于9,或小于0,或为空时

2、当输入重复数字时

3、当输入正确时

 

源码下载:http://files.cnblogs.com/files/web-cxn/%E4%B9%9D%E5%AE%AB%E6%A0%BC%E6%BA%90%E7%A0%81.rar