重点：
游戏区分为8个div，进行游戏时需要判断点击的div是否可移动，移动后判断游戏是否结束。
解决思路：将游戏界面看作一个div大盒子，将大盒子分为9个区域进行编号，这9个区域的位置始终不变；8个div以定位top和left控制其位置，设置9个区域的div分别可以往哪个区域移动，点击时判断可移动的编号区域内是否有div，若有，则无法向该方向移动。每次移动后检查8个div的编号是否与区域的编号完全重合，若重合，则通关。
运行情况
HTML
<divid="container">
<!--最外面的DIV，用来包含里面的结构-->
<divid="game">
<!--游戏区，也就是大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">
<!--游戏控制区-->
<p>
总用时：
<spanid="timer"></span>
</p>
<!--显示游戏时间区域-->
<p>
<buttonid="start">开始</button>
<buttonid="reset">重来</button>
</p>
<!--显示控制按钮区域-->
</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让鼠标移到元素上面显示不同的鼠标形状，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;
//创建编号，不使用第一个元素
vard=newArray(10);
for(vari=1;i<9;i++){
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('#game>div');
for(vari=0;i<game.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;i<10;i++){
if(d[i]==id){
break;
}
}
//查找小div可移动的位置，0则无法移动
vartarget_d=0;
target_d=whereCanTo(i);
//判断当前被点击的小div是否可移动
if(target_d!=0){
//设置当前大div编号为0
d[i]=0;
//将目标大div编号设置为被点击的小div编号
d[target_d]=id;
//设置被点击小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;k<9;k++){
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;j<d_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;
}
}
//设置计时
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;i>1;i--){
varto=parseInt(Math.random()*(i-1)+1);
//设置当前div为随机产生的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编号互换
vartemp=d[to];
d[to]=d[i];
d[i]=temp;
}
}
//初始化
window.addEventListener('load',res);
|
运行时间载入中.....