一言不合敲代码(2)——八数码问题游戏
2016-08-07 18:44
363 查看
一言不合敲代码第二期~
在工作室暑期集训结束,回家的路上。 长春到北京的动车,将近七个小时,忘记拷电影了。。。手机里也没有游戏。。。 无聊至极了,就自己写了个游戏。。。
用HTML+SASS+JS实现八数码问题的小游戏~
直接贴上代码:
(文件目录)
HTML:
SCSS:
JAVASCRIPT:
截图:
实现思路:
利用DIV+CSS构建九宫格图案
给每个格子赋予一个index值
将12345678和空白用随机方法填入每个格子,以innerHTML属性承载
判断格子是否可移动是先通过index的加减关系值得出目标格子四个方向是否有格子,在判断innerHTML是否为空确定能否移动
移动方块的位置即是交换两个格子innerHTML的值
判断是否获得胜利则是判断九个格子的innerHTML合起来的字符串是否等于“12345678 ”
由于是在动车上短短的时间开发的,不免会有很多缺点:
感觉界面和效果过于简单了,之后研究研究在这基础之上加入动画效果的解决方案,并优化样式设计。
至于八数码问题的自动求解方法,目前本人的算法能力还太弱鸡。。。。。。 等以后上了人工智能课老师大概会讲这个算法吧2333333333
华丽丽的分割线
~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.
2016-8-9晚:
发现了程序的重大bug 在程序的胜负判断函数
中,所判断的是最终所获得的字符串是否为‘12345678 ’.然由于在最初的数组中对空白区域的标识出了问题,代码中使用了”“而不是” “,导致游戏区域中空白区域填入了undefined而不是空格,结果就是类似于”123 45678“这样的情况也能被识别为游戏完成,判断错误。 粗心呐~~~~~
解决方案有两个:
(1)、将代码中所有的""直接替换为" ",利用查找替换功能可以轻易实现。
(2)、在胜负判断函数中添加判断条件:boxes[8].innerHTML == 8
问题解决~~~~~
顺别贴出最初的胜利判断方法,后来觉得代码太长了看不下去做了优化(其实是重写23333),后来仔细想想,这种方法也是有优点的。
这个方法在判断的时候是依次判断每个格子的值和索引值是否相等,不相等立马跳出。这种方法减少了不必要的取数以及字符串拼接的操作,程序的运行时间会更少。虽然在这个程序里这点时间是完完全全微不足道无法察别的,不过在大一些的程序里,减少不必要的操作肯定对提升程序效率大有裨益~~
其实代码并不完全是越短越好,对吧?
在工作室暑期集训结束,回家的路上。 长春到北京的动车,将近七个小时,忘记拷电影了。。。手机里也没有游戏。。。 无聊至极了,就自己写了个游戏。。。
用HTML+SASS+JS实现八数码问题的小游戏~
直接贴上代码:
(文件目录)
HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>9 bubbles</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div id="sta"> 您已经过<span id="staSpan">0</span>步,加油啊! </div> </body> <script src="js/action.js"></script> </html>
SCSS:
$boxsize: 200px; $boxmargin: 10px; $clearmargin: -6px; *{ margin: 0; padding: 0; } #container{ width: $boxsize * 3 + $boxmargin * 2 + 6px; height: $boxsize * 3 + $boxmargin * 2 + 6px; margin: 0 auto; background: gray; text-align: center; line-height: $boxsize; color: red; font-weight: bold; font-size: 4em; text-shadow: 1px 1px gray; .box{ float: left; width: $boxsize; height: $boxsize; margin-right: $boxmargin; margin-bottom: $boxmargin; background: yellow; border: 1px solid red; cursor: pointer; } .box:nth-child(3n){ margin-right: 0; } } #sta { width:$boxsize * 3 + $boxmargin * 2 + 6px; margin: 0 auto; text-align: center; color: blue; font-weight: bold; }
JAVASCRIPT:
var boxes = document.getElementById("container").children; var boxValue = [1,2,3,4,5,6,7,8,""]; var clickNum = 0; window.onload = function (){ bulidGame(); } /*初始化游戏*/ function bulidGame(){ var j = boxes.length; for(var i = boxes.length - 1; i >= 0; i--){ /*构建索引值*/ boxes[i].index = j; j--; /*填充随机起始状态*/ var w = i - 0; var b = Math.round(Math.random() * w + 0); boxes[i].innerHTML = boxValue[b]; boxValue.splice(b,1);/*删除数组元素并保持数组元素索引连续的通用方法*/ /*事件绑定*/ boxes[i].onclick = changeSta; } } /*探测四个方向是否可操作*/ function changeSta(){ var thisIndex = this.index - 1; var temp = undefined; changeVelidate(thisIndex,-1); changeVelidate(thisIndex,+1); changeVelidate(thisIndex,-3); changeVelidate(thisIndex,+3); checkWin(); } /*封装方法,单向验证*/ function changeVelidate(thisIndex,veli){ if(boxes[thisIndex+veli]){ if(boxes[thisIndex + veli].innerHTML == ""){ temp = boxes[thisIndex].innerHTML; boxes[thisIndex].innerHTML = ""; boxes[thisIndex + veli].innerHTML = temp; changeClickNum(); }; } } /*单击次数记录器*/ function changeClickNum(){ clickNum++; document.getElementById("staSpan").innerHTML = clickNum; } /*获胜判别*/ function checkWin(){ /*优化版checkWin*/ var string = ""; for(var k = 0;k < boxes.length; k++){ string += boxes[k].innerHTML; } if(string == "12345678"){ alert("恭喜你,答对了。"); window.location.reload(); } }
截图:
实现思路:
利用DIV+CSS构建九宫格图案
给每个格子赋予一个index值
将12345678和空白用随机方法填入每个格子,以innerHTML属性承载
判断格子是否可移动是先通过index的加减关系值得出目标格子四个方向是否有格子,在判断innerHTML是否为空确定能否移动
移动方块的位置即是交换两个格子innerHTML的值
判断是否获得胜利则是判断九个格子的innerHTML合起来的字符串是否等于“12345678 ”
由于是在动车上短短的时间开发的,不免会有很多缺点:
感觉界面和效果过于简单了,之后研究研究在这基础之上加入动画效果的解决方案,并优化样式设计。
至于八数码问题的自动求解方法,目前本人的算法能力还太弱鸡。。。。。。 等以后上了人工智能课老师大概会讲这个算法吧2333333333
华丽丽的分割线
~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.
2016-8-9晚:
发现了程序的重大bug 在程序的胜负判断函数
/*获胜判别*/ function checkWin(){ /*优化版checkWin*/ var string = " "; for(var k = 0;k < boxes.length; k++){ string += boxes[k].innerHTML; } if(string == "12345678 "){ alert("恭喜你,答对了。"); window.location.reload(); } }
中,所判断的是最终所获得的字符串是否为‘12345678 ’.然由于在最初的数组中对空白区域的标识出了问题,代码中使用了”“而不是” “,导致游戏区域中空白区域填入了undefined而不是空格,结果就是类似于”123 45678“这样的情况也能被识别为游戏完成,判断错误。 粗心呐~~~~~
解决方案有两个:
(1)、将代码中所有的""直接替换为" ",利用查找替换功能可以轻易实现。
(2)、在胜负判断函数中添加判断条件:boxes[8].innerHTML == 8
/*获胜判别*/ function checkWin(){ /*优化版checkWin*/ var string = ""; for(var k = 0;k < boxes.length; k++){ string += boxes[k].innerHTML; } if(string == "12345678 " && boxes[8].innerHTML == 8){ alert("恭喜你,答对了。"); window.location.reload(); } }
问题解决~~~~~
顺别贴出最初的胜利判断方法,后来觉得代码太长了看不下去做了优化(其实是重写23333),后来仔细想想,这种方法也是有优点的。
/*旧版checkWin*/ function checkWin(){ var winSta = true; for(var i = 0;i < boxes.length; i++){ if(boxes[i].innerHTML != ""){ if(boxes[i].innerHTML != boxes[i].index){ winSta = false; break; } }else{ if(boxes[i].index != 9){ winSta = false; break; } } } if(winSta == true){ alert("恭喜你,胜利了!"); bulidGame(); } }
这个方法在判断的时候是依次判断每个格子的值和索引值是否相等,不相等立马跳出。这种方法减少了不必要的取数以及字符串拼接的操作,程序的运行时间会更少。虽然在这个程序里这点时间是完完全全微不足道无法察别的,不过在大一些的程序里,减少不必要的操作肯定对提升程序效率大有裨益~~
其实代码并不完全是越短越好,对吧?
相关文章推荐
- 【POJ1077】Eight 八数码问题,解题报告+思路+代码
- ACM之八数码问题----BFS搜索----数独游戏的模拟(中)
- 人工智能 八数码问题求解 附b/s架构代码
- Torque游戏引擎TGE/TGB中文输入的问题解决方案(含代码下载)
- 八数码问题 解的存在性证明以及解法分析(附代码)
- 剑指ACM_1,原题+python代码——Feli的生日礼物、取石子游戏、钱币兑换问题
- ACM之八数码问题----BFS搜索----数独游戏的模拟(下)
- ACM之八数码问题----BFS搜索----数独游戏的模拟(下)
- ACM之八数码问题----BFS搜索----数独游戏的模拟(中)
- 游戏安全资讯精选 2018年第八期:3975款游戏被查处,游戏圈重击;Memcached被利用UDP反射攻击漏洞预警;VentureBeat称区块链或可定位和消除恶意可执行代码的安全问题
- 1.cocos2dx记忆卡片游戏代码、并将游戏移植到“华为荣耀”手机上、移植中的问题总结
- ACM之八数码问题----BFS搜索----数独游戏的模拟(上)
- ACM之八数码问题----BFS搜索----数独游戏的模拟(上)
- 我的编程学习日志(14)--八数码问题(代码)
- 八数码问题: 八数码的游戏 九宫格里面放入8个数字 启发式搜索(1)
- 简易网页游戏——八数码问题游戏
- 求解和为15的棋盘游戏问题的代码分析
- 我的编程学习日志(14)--八数码问题(代码)
- 8数码,8PUZZLE 问题 C++ 代码
- 吴昊品游戏核心算法 Round 17 ——(转载)八数码问题的十重境界