效果圖，點擊開始圖片打亂順序，點擊圖片換位置
下面是代碼，剛入門不久的小白，記錄一下自己的成長歷程
//用數字保存大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;
}
}
