第js實現(xiàn)數(shù)字拼圖本文實例為大家分享了js實現(xiàn)數(shù)字拼圖的具體代碼，供大家參考，具體內(nèi)容如下

重點：

游戲區(qū)分為8個div，進行游戲時需要判斷點擊的div是否可移動，移動后判斷游戲是否結(jié)束。

解決思路：將游戲界面看作一個div大盒子，將大盒子分為9個區(qū)域進行編號，這9個區(qū)域的位置始終不變；8個div以定位top和left控制其位置，設(shè)置9個區(qū)域的div分別可以往哪個區(qū)域移動，點擊時判斷可移動的編號區(qū)域內(nèi)是否有div，若有，則無法向該方向移動。每次移動后檢查8個div的編號是否與區(qū)域的編號完全重合，若重合，則通關(guān)。

運行情況

HTML

divid="container"

!--最外面的DIV，用來包含里面的結(jié)構(gòu)--

divid="game"

!--游戲區(qū)，也就是大DIV方塊--

divid="d1"1/div

divid="d2"2/div

divid="d3"3/div

divid="d4"4/div

divid="d5"5/div

divid="d6"6/div

divid="d7"7/div

divid="d8"8/div

/div

divid="control"

!--游戲控制區(qū)--

p

總用時：

spanid="timer"/span

/p

!--顯示游戲時間區(qū)域--

p

buttonid="start"開始/button

buttonid="reset"重來/button

/p

!--顯示控制按鈕區(qū)域--

/div

/div

CSS

*{

padding:0;

margin:0;

border:0;

}

body{

width:100%;

height:100%;

}

#container{

position:relative;

width:620px;

height:450px;

margin:0auto;

margin-top:100px;

border-radius:1px;

}

#game{

position:absolute;

width:450px;

height:450px;

border-radius:5px;

display:inline-block;

background-color:#ffe171;

box-shadow:0010px#ffe171;

}

#gamediv{

position:absolute;

width:149px;

height:149px;

box-shadow:1px1px2px#777;

background-color:#20a6fa;

color:white;

text-align:center;

font-size:150px;

line-height:150px;

cursor:pointer;

transition:0.3s;

}

#gamediv:hover{

color:#ffe171;

}

#control{

width:150px;

height:450px;

display:inline-block;

position:absolute;

top:0;

right:0;

}

#controlbutton{

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:1px1px2px#ffe171;

border-radius:5px;

box-shadow:2px2px5px#4c98f5;

text-align:center;

/*cursor:pointer讓鼠標(biāo)移到元素上面顯示不同的鼠標(biāo)形狀，pointer是手型*/

cursor:pointer;

}

#reset{

display:inline-block;

font-size:28px;

width:100px;

height:28px;

background-color:#20a6fa;

color:#ffe171;

text-shadow:1px1px2px#ffe171;

border-radius:5px;

box-shadow:2px2px5px#4c98f5;

text-align:center;

cursor:pointer;

}

#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

vartime=0;

//添加暫停判斷

varpause=true;

varset_timer;

//創(chuàng)建編號，不使用第一個元素

vard=newArray(10);

for(vari=1;ii++){

d[i]=i;

}

d[9]=0;

//大div編號可移動的位置

vard_direct=newArray(

[0],[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編號的位置[left,top]

vard_posXY=newArray(

[0],[0,0],[150,0],[300,0],[0,150],[150,150],[300,150],[0,300],[150,300],[300,300]

);

vargame=document.querySelectorAll('#gamediv');

for(vari=0;igame.length;i++){

varj=i+1;

game[i].setAttribute('index',j);

game[i].addEventListener('click',function(e){

move(e,e.target.getAttribute('index'));

});

}

//移動

functionmove(e,id){

//查找小div在大div中的位置

vari=1;

for(i=1;ii++){

if(d[i]==id){

break;

}

}

//查找小div可移動的位置，0則無法移動

vartarget_d=0;

target_d=whereCanTo(i);

//判斷當(dāng)前被點擊的小div是否可移動

if(target_d!=0){

//設(shè)置當(dāng)前大div編號為0

d[i]=0;

//將目標(biāo)大div編號設(shè)置為被點擊的小div編號

d[target_d]=id;

//設(shè)置被點擊小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';

}

//判斷游戲是否完成

varfinish_flag=true;

for(vark=1;kk++){

if(d[k]!=k){

finish_flag=false;

break;

}

}

if(finish_flag==true){

if(!pause){

start();

alert('bingocongratulation!');

}

}

}

//查找并返回小div可以移動的編號

functionwhereCanTo(cur_div){

varj=0;

varmove_flag=false;

for(j=0;jd_direct[cur_div].length;j++){

if(d[d_direct[cur_div][j]]==0){

move_flag=true;

break;

}

}

if(move_flag==true){

returnd_direct[cur_div][j];

}else{

return0;

}

}

//設(shè)置計時

functiontimer(){

time+=1;

varmin=parseInt(time/60);

vars=time%60;

document.getElementById('timer').innerHTML=min+'分'+s+'秒';

}

//開始暫停

varstart=document.querySelector('#start');

start.addEventListener('click',sta);

functionsta(){

if(pause){

start.innerHTML='暫停';

pause=false;

set_timer=setInterval(timer,1000);

}else{

start.innerHTML='開始';

pause=true;

clearInterval(set_timer);

}

}

//重置游戲

varreset=document.querySelector('#reset');

reset.addEventListener('click',res);

functionres(){

time=0;

random_d();

if(pause){

sta();

}

}

//隨機打亂

functionrandom_d(){

for(vari=9;ii--){

varto=parseInt(Ma