突然想自己写点东西。于是趁无聊的时候写个拼图游戏~
首先上结果：
使用：html, sass, vue ,弹出效果用layer. (本人比较懒~~)
思路：16个tr 15个class名。每个class名的背景 都是大图的一些块。移动效果，切换calss名而已~~
上代码：
html:
js:（vue的写法）
1.用一个数组储存小方块位置及移动状态监测。
data:{
listss:[],
rands:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
isOk:false,
time:10,
timers:null
},
2.移动的判断
由于我SB地用了一个1维数组，于是我的判断就有点傻~~~
tomove:function(id,val){
//拼成功后阻止移动。
if(this.isOk){
return;
}
var num;
var i0;
var j0;
//先找到空白的格子。
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
if(this.listss[i][j].val==15){
num=this.listss[i][j].id;
i0=i;
j0=j;
}
}
}
//如果不是点击空白格子周围的4个格子，则return；
if(!(num==id-1 || num==id+1 ||num==id-4 || num==id+4)){
return;
//分别点击上下左右 方位的判断。及修改 class名。
}else if(num==id-1 && (num%4)!=3){
this.listss[i0][j0].val=val;
this.listss[i0][j0+1].val=15;
this.win();
}else if(num==id+1 && (num%4)!=0){
this.listss[i0][j0].val=val;
this.listss[i0][j0-1].val=15;
this.win();
}else if(num==id-4 && (num<12)){
this.listss[i0][j0].val=val;
this.listss[i0+1][j0].val=15;
this.win();
}else if(num==id+4 && (num>3)){
this.listss[i0][j0].val=val;
this.listss[i0-1][j0].val=15;
this.win();
}
},
3.拼图成功的判断：（所有位置都对应，则成功！）（其实应该是判断失败的，如果不相等，就return 好了~~~）（自己sb了）
win:function(){
var valId=0;
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
var value=this.listss[i][j].val;
if(this.listss[i][j].id==value){
valId++;
}
if(valId==16){
this.isOk=true;
clearInterval(this.timers);
return dialog.msg("恭喜！拼成功了！");
}
}
}
},
4.初始化的随机。第一个数随机，（当然所有都随机是最好的~）（我使用了一个比较懒得办法~）
bewrong:function(){
var num0=0;
var num=15;
var first;
var attr1=[];
var attr2=[];
var randss=this.rands;
for(var i= 0; i<16;i++){
first=Math.round(Math.random()*num);
var vals=randss[first];
var obj={
id:i,
val:vals
}
num--;
randss.splice(first,1);
attr1.push(obj);
}
for(var j=0;j<4;j++){
attr2=[];
attr2.push(attr1[num0]);
attr2.push(attr1[num0+1]);
attr2.push(attr1[num0+2]);
attr2.push(attr1[num0+3]);
num0+=4;
this.listss.push(attr2);
}
},
心得：
写一个东西得有规划。心中得有一个谱，这样下手的时候会很舒服。
其实，回过头来看这个拼图，有很多sb的地方。（就不一一举例了）
但是，随着看的深入，优化的想法自然而然地就出来了，所以不要讨厌看之前代码，现在看，认为很SB ，那是你进步的标志~。