效果图，点击开始图片打乱顺序，点击图片换位置
下面是代码，刚入门不久的小白，记录一下自己的成长历程
//用数字保存大div也就是#game中的9小格子所在的位置，0表示没有格子；
//为了逻辑简单点，所有的数组第一个位置没有内容。
var d = [,1,2,3,4,5,6,7,8,0];
//用二维数组放每个位置上的小格子可以移动的位置；
var direiton =[
,
[2,4],
[1,3,5],
[2,6],
[1,5,7],
[2,4,6,8],
[3,5,9],
[4,8],
[5,7,9],
[6,8]
]
// 用二维数组放大div中9个位置对应定位的坐标
var posxy = [
,
[0,0],
[150,0],
[300,0],
[0,150],
[150,150],
[300,150],
[0,300],
[150,300],
[300,300]
]
//设置开始按钮的标志位，当游洗开始了之后不可以在点击
var pause=true;
$('#start').click(function () {
//遍历小格子给他们加点击事件
$('p').each(function (index) {
$(this).click(function () {
move(index+1);
//调用move函数，index加1，表示当前点击的格子的位置
});
});
if (pause) {
//点击开始按钮，打乱图片顺序
restart();
//让标志位变为false，此时开始按钮不能点击
pause=false;
}
});
//重新开始按钮可以让游戏重新开始
$('#restart').click(function () {
restart();
})
//设置move函数，点击时让格子移动位置
function move(num) {
//用for循环遍历格子，确认我们点击的格子的标号
for(var j=1;j<9;j++){
if (d[j]==num) {
console.log(d[j]);
break;
}
}
//调用去哪函数判断我们当前点击的格子是否可以移动，如果可以变移动
var target_d = canwhere(j);
//target_d变量保存了canwhere函数的结果
if (target_d!=0) {
//如果不为0，则表示当前点击的格子可以移动到target_d这个位置去。
$('#d'+num).css({left:posxy[target_d][0],top:posxy[target_d][1]});
//通过id选中格子让他的定位坐标等于target_d的定位坐标
d[j]=0;
//因为点击的格子已经移走，则让该位置保存的数值变为0，表示没有格子
d[target_d]=num;
//让target_d位置编号则变为当前移动的格子标号
}
//判断是否拼图完整
var finish_flag = true;
//当所有的格子都按顺序排好，则完成拼图
for (var k = 0; k < 9; k++) {
if (d[k]!=k) {
finish_flag = false;
break;
}
}
if (finish_flag) {
alert('完成拼图');
}
}
//格子可以移动的位置的函数
function canwhere(j) {
var move_flag;//设格子是否可以移动的标志位
for (var i = 0; i < direiton[j].length; i++) {
//遍历点击格子可去的位置是否为空，这些位置在数组d中保存的值是否为0，如果为0则表示这个位置是空的；
if (d[direiton[j][i]]==0) {
//设置标志位为true；
move_flag = true;
break;
//跳出循环
}
}
if (move_flag) {
//如果move_flag，返出格子可以移动的位置。
return direiton[j][i];
}else {
//否则返回0；
move_flag = false;
return 0;
}
}
//打乱图片顺序
function restart() {
//从第9张图片开始，通过随机数产生一个随机位置，与该图片换位置
for (var m = 9; m>1; m--) {
var rand = parseInt(Math.random()*(m-1)+1);
// console.log(rand);
if (d[m]!=0) {
$('#d'+ d[m]).css({left:posxy[rand][0],top:posxy[rand][1]});
}
if (d[rand]!=0) {
$('#d'+ d[rand]).css({left:posxy[m][0],top:posxy[m][1]});
}
var tem=d[m];
d[m]=d[rand];
d[rand]=tem;
}
}张晶晶 21:26:38
1
2
3
4
5
6
7
8
开始
再来一局
//用数字保存大div也就是#game中的9小格子所在的位置，0表示没有格子；
var d = [,1,2,3,4,5,6,7,8,0];
//用二维数组放每个位置上的小格子可以移动的位置；
var direiton =[
,
[2,4],
[1,3,5],
[2,6],
[1,5,7],
[2,4,6,8],
[3,5,9],
[4,8],
[5,7,9],
[6,8]
]
// 用二维数组放大div中9个位置对应定位的坐标
var posxy = [
,
[0,0],
[150,0],
[300,0],
[0,150],
[150,150],
[300,150],
[0,300],
[150,300],
[300,300]
]
//设置开始按钮的标志位，当游洗开始了之后不可以在点击
var pause=true;
$('#start').click(function () {
//遍历小格子给他们加点击事件
$('p').each(function (index) {
$(this).click(function () {
move(index+1);
//调用move函数，index加1，表示当前点击的格子的位置
});
});
if (pause) {
//点击开始按钮，打乱图片顺序
restart();
//让标志位变为false，此时开始按钮不能点击
pause=false;
}
});
//重新开始按钮可以让游戏重新开始
$('#restart').click(function () {
restart();
})
//设置move函数，点击时让格子移动位置
function move(num) {
//用for循环遍历格子，确认我们点击的格子的标号
for(var j=1;j<9;j++){
if (d[j]==num) {
console.log(d[j]);
break;
}
}
//调用去哪函数判断我们当前点击的格子是否可以移动，如果可以变移动
var target_d = canwhere(j);
//target_d变量保存了canwhere函数的结果
if (target_d!=0) {
//如果不为0，则表示当前点击的格子可以移动到target_d这个位置去。
$('#d'+num).css({left:posxy[target_d][0],top:posxy[target_d][1]});
//通过id选中格子让他的定位坐标等于target_d的定位坐标
d[j]=0;
//因为点击的格子已经移走，则让该位置保存的数值变为0，表示没有格子
d[target_d]=num;
//让target_d位置编号则变为当前移动的格子标号
}
//判断是否拼图完整
var finish_flag = true;
//当所有的格子都按顺序排好，则完成拼图
for (var k = 0; k < 9; k++) {
if (d[k]!=k) {
finish_flag = false;
break;
}
}
if (finish_flag) {
alert('完成拼图');
}
}
//格子可以移动的位置的函数
function canwhere(j) {
var move_flag;//设格子是否可以移动的标志位
for (var i = 0; i < direiton[j].length; i++) {
//遍历点击格子可去的位置是否为空，这些位置在数组d中保存的值是否为0，如果为0则表示这个位置是空的；
if (d[direiton[j][i]]==0) {
//设置标志位为true；
move_flag = true;
break;
//跳出循环
}
}
if (move_flag) {
//如果move_flag，返出格子可以移动的位置。
return direiton[j][i];
}else {
//否则返回0；
move_flag = false;
return 0;
}
}
//打乱图片顺序
function restart() {
//从第9张图片开始，通过随机数产生一个随机位置，与该图片换位置
for (var m = 9; m>1; m--) {
var rand = parseInt(Math.random()*(m-1)+1);
// console.log(rand);
if (d[m]!=0) {
$('#d'+ d[m]).css({left:posxy[rand][0],top:posxy[rand][1]});
}
if (d[rand]!=0) {
$('#d'+ d[rand]).css({left:posxy[m][0],top:posxy[m][1]});
}
var tem=d[m];
d[m]=d[rand];
d[rand]=tem;
}
}
