您正在使用IPV4(44.192.247.184)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       悟空收录网      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 4
2023年 情人节 13
2024年 元 旦 334
2024年 春 节 374
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
js实现数字拼图
内容摘要: 重点:游戏区分为8个div,进行游戏时需要判断点击的div是否可移动,移动后判断游戏是否结束。解决思路:将游戏界面看作一个div大盒子,将大盒子分为9个区域进行编号,这9个区域的位置始终不变;8个div以定位top和left控制其位置,设置9个区域的div分别可以往哪个区域移动,点击时判断可移动的编号区域内是否有div,若有,则无法向该方向移动。每次移动后检......
重点:

游戏区分为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);

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JS实现图片轮播跑马灯 下一篇:js实现点击切换和自动播放的轮播图
发布日期:2022/11/1
手机扫二维码直达本页
发布时间:16:29:03
点  击:14
录  入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023