效果圖，點(diǎn)擊開始圖片打亂順序，點(diǎn)擊圖片換位置
下面是代碼飞蛹，剛?cè)腴T不久的小白肆汹，記錄一下自己的成長歷程
//用數(shù)字保存大div也就是#game中的9小格子所在的位置唧席，0表示沒有格子懂讯；
//為了邏輯簡單點(diǎn)刻获，所有的數(shù)組第一個位置沒有內(nèi)容坪创。
var d = [,1,2,3,4,5,6,7,8,0];
//用二維數(shù)組放每個位置上的小格子可以移動的位置塌鸯；
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]
]
// 用二維數(shù)組放大div中9個位置對應(yīng)定位的坐標(biāo)
var posxy = [
,
[0,0],
[150,0],
[300,0],
[0,150],
[150,150],
[300,150],
[0,300],
[150,300],
[300,300]
]
//設(shè)置開始按鈕的標(biāo)志位侍瑟，當(dāng)游洗開始了之后不可以在點(diǎn)擊
var pause=true;
$('#start').click(function () {
//遍歷小格子給他們加點(diǎn)擊事件
$('p').each(function (index) {
$(this).click(function () {
move(index+1);
//調(diào)用move函數(shù)，index加1丙猬，表示當(dāng)前點(diǎn)擊的格子的位置
});
});
if (pause) {
//點(diǎn)擊開始按鈕涨颜，打亂圖片順序
restart();
//讓標(biāo)志位變?yōu)閒alse，此時開始按鈕不能點(diǎn)擊
pause=false;
}
});
//重新開始按鈕可以讓游戲重新開始
$('#restart').click(function () {
restart();
})
//設(shè)置move函數(shù)茧球，點(diǎn)擊時讓格子移動位置
function move(num) {
//用for循環(huán)遍歷格子庭瑰，確認(rèn)我們點(diǎn)擊的格子的標(biāo)號
for(var j=1;j<9;j++){
if (d[j]==num) {
console.log(d[j]);
break;
}
}
//調(diào)用去哪函數(shù)判斷我們當(dāng)前點(diǎn)擊的格子是否可以移動，如果可以變移動
var target_d = canwhere(j);
//target_d變量保存了canwhere函數(shù)的結(jié)果
if (target_d!=0) {
//如果不為0抢埋，則表示當(dāng)前點(diǎn)擊的格子可以移動到target_d這個位置去弹灭。
$('#d'+num).css({left:posxy[target_d][0],top:posxy[target_d][1]});
//通過id選中格子讓他的定位坐標(biāo)等于target_d的定位坐標(biāo)
d[j]=0;
//因為點(diǎn)擊的格子已經(jīng)移走，則讓該位置保存的數(shù)值變?yōu)?揪垄，表示沒有格子
d[target_d]=num;
//讓target_d位置編號則變?yōu)楫?dāng)前移動的格子標(biāo)號
}
//判斷是否拼圖完整
var finish_flag = true;
//當(dāng)所有的格子都按順序排好穷吮，則完成拼圖
for (var k = 0; k < 9; k++) {
if (d[k]!=k) {
finish_flag = false;
break;
}
}
if (finish_flag) {
alert('完成拼圖');
}
}
//格子可以移動的位置的函數(shù)
function canwhere(j) {
var move_flag;//設(shè)格子是否可以移動的標(biāo)志位
for (var i = 0; i < direiton[j].length; i++) {
//遍歷點(diǎn)擊格子可去的位置是否為空，這些位置在數(shù)組d中保存的值是否為0饥努，如果為0則表示這個位置是空的捡鱼；
if (d[direiton[j][i]]==0) {
//設(shè)置標(biāo)志位為true；
move_flag = true;
break;
//跳出循環(huán)
}
}
if (move_flag) {
//如果move_flag酷愧，返出格子可以移動的位置驾诈。
return direiton[j][i];
}else {
//否則返回0；
move_flag = false;
return 0;
}
}
//打亂圖片順序
function restart() {
//從第9張圖片開始溶浴，通過隨機(jī)數(shù)產(chǎn)生一個隨機(jī)位置乍迄，與該圖片換位置
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
開始
再來一局
//用數(shù)字保存大div也就是#game中的9小格子所在的位置，0表示沒有格子士败；
var d = [,1,2,3,4,5,6,7,8,0];
//用二維數(shù)組放每個位置上的小格子可以移動的位置闯两；
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]
]
// 用二維數(shù)組放大div中9個位置對應(yīng)定位的坐標(biāo)
var posxy = [
,
[0,0],
[150,0],
[300,0],
[0,150],
[150,150],
[300,150],
[0,300],
[150,300],
[300,300]
]
//設(shè)置開始按鈕的標(biāo)志位，當(dāng)游洗開始了之后不可以在點(diǎn)擊
var pause=true;
$('#start').click(function () {
//遍歷小格子給他們加點(diǎn)擊事件
$('p').each(function (index) {
$(this).click(function () {
move(index+1);
//調(diào)用move函數(shù)拱烁，index加1生蚁，表示當(dāng)前點(diǎn)擊的格子的位置
});
});
if (pause) {
//點(diǎn)擊開始按鈕，打亂圖片順序
restart();
//讓標(biāo)志位變?yōu)閒alse戏自，此時開始按鈕不能點(diǎn)擊
pause=false;
}
});
//重新開始按鈕可以讓游戲重新開始
$('#restart').click(function () {
restart();
})
//設(shè)置move函數(shù)邦投，點(diǎn)擊時讓格子移動位置
function move(num) {
//用for循環(huán)遍歷格子，確認(rèn)我們點(diǎn)擊的格子的標(biāo)號
for(var j=1;j<9;j++){
if (d[j]==num) {
console.log(d[j]);
break;
}
}
//調(diào)用去哪函數(shù)判斷我們當(dāng)前點(diǎn)擊的格子是否可以移動擅笔，如果可以變移動
var target_d = canwhere(j);
//target_d變量保存了canwhere函數(shù)的結(jié)果
if (target_d!=0) {
//如果不為0志衣，則表示當(dāng)前點(diǎn)擊的格子可以移動到target_d這個位置去屯援。
$('#d'+num).css({left:posxy[target_d][0],top:posxy[target_d][1]});
//通過id選中格子讓他的定位坐標(biāo)等于target_d的定位坐標(biāo)
d[j]=0;
//因為點(diǎn)擊的格子已經(jīng)移走，則讓該位置保存的數(shù)值變?yōu)?念脯，表示沒有格子
d[target_d]=num;
//讓target_d位置編號則變?yōu)楫?dāng)前移動的格子標(biāo)號
}
//判斷是否拼圖完整
var finish_flag = true;
//當(dāng)所有的格子都按順序排好狞洋，則完成拼圖
for (var k = 0; k < 9; k++) {
if (d[k]!=k) {
finish_flag = false;
break;
}
}
if (finish_flag) {
alert('完成拼圖');
}
}
//格子可以移動的位置的函數(shù)
function canwhere(j) {
var move_flag;//設(shè)格子是否可以移動的標(biāo)志位
for (var i = 0; i < direiton[j].length; i++) {
//遍歷點(diǎn)擊格子可去的位置是否為空，這些位置在數(shù)組d中保存的值是否為0绿店，如果為0則表示這個位置是空的吉懊；
if (d[direiton[j][i]]==0) {
//設(shè)置標(biāo)志位為true；
move_flag = true;
break;
//跳出循環(huán)
}
}
if (move_flag) {
//如果move_flag假勿，返出格子可以移動的位置借嗽。
return direiton[j][i];
}else {
//否則返回0；
move_flag = false;
return 0;
}
}
//打亂圖片順序
function restart() {
//從第9張圖片開始转培，通過隨機(jī)數(shù)產(chǎn)生一個隨機(jī)位置恶导，與該圖片換位置
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;
}
}
