本文實例為大家分享了javascript實現拼圖游戲的具體代碼，供大家參考，具體內容如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<div id="container"> <!--最外面的DIV，用來包含里面的結構--> <div id="game"> <!--游戲區,大DIV方塊--> <div id="d1" onclick="move(1)">1</div> <!--小DIV，也就是8個小方塊。當點擊的時候執行move()函數，參數是顯示的編號，這樣我們就知道點擊了哪個方塊--> <div id="d2" onclick="move(2)">2</div> <div id="d3" onclick="move(3)">3</div> <div id="d4" onclick="move(4)">4</div> <div id="d5" onclick="move(5)">5</div> <div id="d6" onclick="move(6)">6</div> <div id="d7" onclick="move(7)">7</div> <div id="d8" onclick="move(8)">8</div> </div> <div id="control"> <!--游戲控制區--> <p> <rowspan id="timeText">總用時</rowspan> <rowspan id="timer"></rowspan> </p> <!--顯示游戲時間區域--> <p> <rowspan id="start" onclick="start()">開始</rowspan> <rowspan id="reset" onclick="reset()">重來</rowspan> </p> <!--顯示控制按鈕區域--> </div></div> |
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
*{ padding: 0; margin: 0; border: 0; } /* *是通配符，給所有的元素去掉默認樣式，因為有的瀏覽器會默認加上一些樣式，這可能會給布局帶來問題 */ body{ width: 100%; height: 100%; } /* 給body設置100%的高度和寬度，這樣就會根據瀏覽器屏幕大小自動適配 */ #container{ position: relative; width: 620px; height: 450px; margin: 0 auto; margin-top: 100px; border-radius: 1px; } /* 這是包裹所有元素的DIV，給他設置620px的寬和450px的高，這個大小可以設置為更大，但是不能小，至少要能包含里面所有的元素 */ #game{ position: absolute; width: 450px; height: 450px; border-radius: 5px; display: inline-block; background-color: #ffe171; box-shadow: 0 0 10px #ffe171; } /* 這是游戲區的DIV，這個大小是計算出來的，取決于你的小方塊的大小。這里我們設置小方塊的大小為150px 150px，所以這個大小是150px*3，為450px */ #game div{ position: absolute; width: 149px; height: 149px; box-shadow: 1px 1px 2px #777; background-color: #20a6fa; color: white; text-align: center; font-size: 150px; line-height: 150px; cursor: pointer; -webkit-transition: 0.3s;/*瀏覽器前綴，兼容其他瀏覽器 chrome*/ -moz-transition: 0.3s;/*firefox*/ -ms-transition: 0.3s;/*ie*/ -o-transition: 0.3s;/*opera*/ transition: 0.3s; } /* 這就是小方塊的大小了，定位為絕對定位，這樣改變位置不會影響其他元素的位置。寬高都是149px。注意了，我們還設置了box-shadow:1px 1px 2px #777 ； 它還有邊框陰影，所以149px 加上邊框1px，它的總寬度是150px 下面的transition：0.3s是設置過渡時間，這是css3的屬性，它會讓屬性改變呈現過渡動畫，所以 當我們改變方塊的位置時，它會有一個動畫，我們不必自己編寫動畫函數，這回讓你瘋狂*/ #game div:hover{ color: #ffe171; } /*給方塊設置鼠標懸停動畫，當鼠標懸停在元素上面時，會用這里的屬性替換上面的屬性，移開后又會變為原來的，這里我們是把字體顏色改變*/ #control{ width: 150px; height: 450px; display: inline-block; float: right; } /*控制區，display:inline-block會讓元素呈現塊狀元素的特性，使得可以改變大小，同時也會具有行內元素的特性，使得不會占據一行空間，float:right讓元素浮動到右邊*/ #control rowspan{ height: 25px; font-size: 20px; color: #222; margin-top: 10px; } /*設置控制區按鈕的共同樣式*/ #start{ display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171; border-radius: 5px; box-shadow: 2px 2px 5px #4c98f5; text-align: center; cursor: pointer; } /*給start按鈕設置屬性。cursor:pointer屬性讓鼠標移到元素上面時會顯示不同的鼠標形狀，pointer是手型*/ #reset{ display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171;/*字體陰影*/ border-radius: 5px;/*圓角屬性*/ box-shadow: 2px 2px 5px #4c98f5;/*盒子陰影*/ text-align: center;/*文字居中*/ cursor: pointer; } /*給Reset按鈕設置屬性*/ #d1{ left: 0px; } #d2{ left: 150px; } #d3{ left: 300px; } #d4{ top: 150px; } #d5{ top: 150px; left: 150px; } #d6{ top: 150px; left: 300px; } #d7{ top: 300px; } #d8{ left: 150px; top: 300px; }/*這是預先給每個小方塊按照順序排好位置*/ |
JS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
var time=0; //保存定時時間 var pause=true; //設置是否暫停標志，true表示暫停 var set_timer; //設置定時函數 var d=new Array(10); //保存大DIV當前裝的小DIV的編號 var d_direct=new Array( [0],//為了邏輯更簡單，第一個元素我們不用，我們從下標1開始使用 [2,4],//大DIV編號為1的DIV可以去的位置，比如第一塊可以去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編號的可移動位置編號 var d_posXY=new Array( [0],//同樣，我們不使用第一個元素 [0,0],//第一個表示left,第二個表示top，比如第一塊的位置為let:0px,top:0px [150,0], [300,0], [0,150], [150,150], [300,150], [0,300], [150,300], [300,300] ); //大DIV編號的位置 d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; //默認按照順序排好，大DIV第九塊沒有，所以為0，我們用0表示空白塊 function move(id){ //移動函數，前面我們已將講了 var i=1; for(i=1; i<10; ++i){ if( d[i] == id ) break; } //這個for循環是找出小DIV在大DIV中的位置 var target_d=0; //保存小DIV可以去的編號，0表示不能移動 target_d=whereCanTo(i); //用來找出小DIV可以去的位置，如果返回0，表示不能移動，如果可以移動，則返回可以去的位置編號 if( target_d != 0){ d[i]=0; //把當前的大DIV編號設置為0，因為當前小DIV已經移走了，所以當前大DIV就沒有裝小DIV了 d[target_d]=id; //把目標大DIV設置為被點擊的小DIV的編號 document.getElementById("d"+id).style.left=d_posXY[target_d][0]+"px"; document.getElementById("d"+id).style.top=d_posXY[target_d][1]+"px"; //最后設置被點擊的小DIV的位置，把它移到目標大DIV的位置 } //如果target_d不為0，則表示可以移動，且target_d就是小DIV要去的大DIV的位置編號 var finish_flag=true; //設置游戲是否完成標志，true表示完成 for(var k=1; k<9; ++k){ if( d[k] != k){ finish_flag=false; break; //如果大DIV保存的編號和它本身的編號不同，則表示還不是全部按照順序排的，那么設置為false，跳出循環，后面不用再判斷了，因為只要一個不符，就沒完成游戲 } } //從1開始，把每個大DIV保存的編號遍歷一下，判斷是否完成 if(finish_flag==true){ if(!pause) start(); alert("congratulation"); } //如果為true，則表示游戲完成，如果當前沒有暫停，則調用暫停韓式，并且彈出提示框，完成游戲。 //start()這個函數是開始，暫停一起的函數，如果暫停，調用后會開始，如果開始，則調用后會暫停 } function whereCanTo(cur_div){ //判斷是否可移動函數，參數是大DIV的編號，不是小DIV的編號，因為小DIV編號跟可以去哪沒關系，小DIV是會動的 var j=0; var move_flag=false; for(j=0; j<d_direct[cur_div].length; ++j){ //把所有可能去的位置循環遍歷一下 if( d[ d_direct[cur_div][j] ] == 0 ){ move_flag=true; break; } //如果目標的值為0，說明目標位置沒有裝小DIV，則可以移動，跳出循環 } if(move_flag == true){ return d_direct[cur_div][j]; }else{ return 0; } //可以移動，則返回目標位置的編號，否則返回0，表示不可移動 } //定時函數，每一秒執行一次 function timer(){ time+=1;//一秒鐘加一，單位是秒 var min=parseInt(time/60);//把秒轉換為分鐘，一分鐘60秒，取商就是分鐘 var sec=time%60;//取余就是秒 document.getElementById("timer").innerHTML=min+"分"+sec+"秒";//然后把時間更新顯示出來 } //開始暫停函數 function start(){ if(pause){ document.getElementById("start").innerHTML="暫停";//把按鈕文字設置為暫停 pause=false;//暫停表示設置為false set_timer=setInterval(timer,1000);//啟動定時 //如果當前是暫停，則開始 }else{ document.getElementById("start").innerHTML="開始"; pause=true; clearInterval(set_timer); } } //重置函數 function reset(){ time=0;//把時間設置為0 random_d();//把方塊隨機打亂函數 if(pause)//如果暫停，則開始計時 start(); } //隨機打亂方塊函數，我們的思路是從第九塊開始，隨機生成一個數，然后他們兩塊對調一下 function random_d(){ for(var i=9; i>1; --i){ var to=parseInt(Math.random()*(i-1)+1);//產生隨機數，范圍為1到i，不能超出范圍，因為沒這個id的DIV if(d[i]!=0){ document.getElementById("d"+d[i]).style.left=d_posXY[to][0]+"px"; document.getElementById("d"+d[i]).style.top=d_posXY[to][1]+"px"; } //把當前的DIV位置設置為隨機產生的DIV的位置 if(d[to]!=0){ document.getElementById("d"+d[to]).style.left=d_posXY[i][0]+"px"; document.getElementById("d"+d[to]).style.top=d_posXY[i][1]+"px"; } //把隨機產生的DIV的位置設置為當前的DIV的位置 var tem=d[to]; d[to]=d[i]; d[i]=tem; //然后把它們兩個的DIV保存的編號對調一下 } } //初始化函數，頁面加載的時候調用重置函數，重新開始 window.onload=function(){ reset(); } |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_41309350/article/details/113184594
