一言不合敲代码第二期~
在工作室暑期集训结束，回家的路上。 长春到北京的动车，将近七个小时，忘记拷电影了。。。手机里也没有游戏。。。 无聊至极了，就自己写了个游戏。。。
用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{
$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;
$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 {
$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();
}
}
/*旧版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();
}
}这个方法在判断的时候是依次判断每个格子的值和索引值是否相等，不相等立马跳出。这种方法减少了不必要的取数以及字符串拼接的操作，程序的运行时间会更少。虽然在这个程序里这点时间是完完全全微不足道无法察别的，不过在大一些的程序里，减少不必要的操作肯定对提升程序效率大有裨益~~