简易网页游戏——八数码问题游戏

来源：互联网发布：15个java小项目文库编辑：程序博客网时间：2024/06/10 13:03

在工作室暑期集训结束，回家的路上。长春到北京的动车，将近七个小时，忘记拷电影了。。。手机里也没有游戏。。。无聊至极了，就自己写了个游戏。。。

用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();}}

这个方法在判断的时候是依次判断每个格子的值和索引值是否相等，不相等立马跳出。这种方法减少了不必要的取数以及字符串拼接的操作，程序的运行时间会更少。虽然在这个程序里这点时间是完完全全微不足道无法察别的，不过在大一些的程序里，减少不必要的操作肯定对提升程序效率大有裨益~~

其实代码并不完全是越短越好，对吧？

2 0