js实现数字拼图方法,js拼接数字,js实现数字拼图

js实现数字拼图方法,js拼接数字,js实现数字拼图

这篇文章主要为大家详细介绍了射流研究…实现数字拼图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了射流研究…实现数字拼图的具体代码,供大家参考,具体内容如下

重点:

游戏区分为8个div,进行游戏时需要判断点击的差异是否可移动,移动后判断游戏是否结束。

解决思路:将游戏界面看作一个差异大盒子,将大盒子分为9个区域进行编号,这9个区域的位置始终不变;8个差异以定位顶端和左边的控制其位置,设置9个区域的差异分别可以往哪个区域移动,点击时判断可移动的编号区域内是否有div,若有,则无法向该方向移动。每次移动后检查8个差异的编号是否与区域的编号完全重合,若重合,则通关。

运行情况

超文本标记语言

div id=容器

!-最外面的DIV,用来包含里面的结构-

div id=游戏

!-游戏区,也就是大差异方块-

div id=d11/div

div id=d22/div

div id=d33/div

div id=d44/div

div id=" D5 " 5/div

div id=d66/div

div id=d77/div

div id=d88/div

/div

div id=control

!-游戏控制区-

p

总用时:

span id=timer/span

/p

!-显示游戏时间区域-

p

按钮id="开始"开始/按钮

按钮id="重置"重来/按钮

/p

!-显示控制按钮区域-

/div

/div

半铸钢钢性铸铁(铸造半钢)

* {

填充:0;

边距:0;

边框:0;

}

正文{

宽度:100%;

身高:100%;

}

#容器{

位置:相对;

宽度:620像素

高度:450像素

边距:0自动;

边距-顶部:100像素

边框-半径:1px

}

#游戏{

位置:绝对;

宽度:450像素

高度:450像素

边框半径:5px

显示:内嵌-块;

背景色:# ffe171

box-shadow:0 0 10px # FFE 171;

}

#游戏部门{

位置:绝对;

宽度:149像素

身高:149像素

box-shadow:1px 1px 2px # 777;

背景色:# 20a6fa

颜色:白色;

文本对齐:居中;

字体大小:150像素;

行高:150像素;

光标:指针;

转场:0.3秒

}

#游戏部门:悬停{

颜色:# ffe171

}

#控制{

宽度:150像素

高度:450像素

显示:内嵌-块;

位置:绝对;

top:0;

右:0;

}

#控制按钮{

高度:25px

字体大小:20px

颜色:# 222;

页边距-顶部:10px

}

#开始{

显示:内嵌-块;

字体大小:28px

宽度:100像素

高度:28px

背景色:# 20a6fa

颜色:# ffe171

文-影:1px 1px 2px # FFE 171;

边框半径:5px

盒影:2px 2px 5px # 4c 98 f 5;

文本对齐:居中;

/*光标:指针让鼠标移到元素上面显示不同的鼠标形状,指针是手型*/

光标:指针;

}

#重置{

显示:内嵌-块;

字体大小:28px

宽度:100像素

高度:28px

背景色:# 20a6fa

颜色:# ffe171

文-影:1px 1px 2px # FFE 171;

边框半径:5px

盒影:2px 2px 5px # 4c 98 f 5;

文本对齐:居中;

光标:指针;

}

#d1 {

左:0px

}

#d2 {

左:150像素

}

#d3 {

左:300像素

}

#d4 {

顶:150 px

}

#d5 {

顶:150 px

左:150像素

}

#d6 {

顶:150 px

左:300像素

}

#d7 {

顶配:300像素

}

#d8 {

左:150像素

顶配:300像素

}

射流研究…

var time=0;

//添加暂停判断

var pause=true

var设置计时器

//创建编号,不使用第一个元素

变量d=新数组(10);

for(var I=1;I 9;i ) {

d[I]=I;

}

d[9]=0;

//大差异编号可移动的位置

var d_direct=新数组(

[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]

);

//大差异编号的位置[左上]

var d_posXY=新数组(

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

);

var游戏=文档。查询selector all(# game div));

for(var I=0;I game . length {

var j=I 1;

游戏[我]。setAttribute(index ,j);

游戏[我]。addEventListener(click ,函数(e) {

移动目标。get属性( index );

});

}

//移动

函数移动(e,id) {

//查找小差异在大差异中的位置

var I=1;

for(I=1;i 10i ) {

if (d[i]==id) {

打破;

}

}

//查找小差异可移动的位置,0则无法移动

var target _ d=0;

target _ d=其中canto(I);

//判断当前被点击的小差异是否可移动

if (target_d!=0) {

//设置当前大差异编号为0

d[I]=0;

//将目标大差异编号设置为被点击的小差异编号

d[target _ d]=id;

//设置被点击小差异的位置

文档。getelementbyid( d id)。风格。left=d _ posXY[target _ d][0]“px”;

文档。getelementbyid( d id)。风格。top=d _ posXY[target _ d][1] px ;

}

//判断游戏是否完成

var finish _ flag=true

for(var k=1;K9;k ) {

if (d[k]!=k) {

完成标志=假

打破;

}

}

if (finish_flag==true) {

如果(!暂停){

start();

警报(恭喜中了!);

}

}

}

//查找并返回小差异可以移动的编号

函数whereCanTo(cur_div) {

var j=0;

var move _ flag=false

for(j=0;直达航班.长度;j ) {

if(d[d _ direct[cur _ div][j]]==0){

move _ flag=true

打破;

}

}

if (move_flag==true) {

return d _ direct[cur _ div][j];

}否则{

返回0;

}

}

//设置计时

函数计时器(){

时间=1;

var min=parseInt(时间/60);

var s=时间% 60;

document.getElementById(timer )。innerHTML=min 分" s "秒;

}

//开始暂停

var start=文档。查询选择器(# start);

start.addEventListener(click ,sta);

函数sta() {

如果(暂停){

start.innerHTML=暂停;

暂停=假;

set_timer=setInterval(定时器,1000);

}否则{

start.innerHTML=开始;

暂停=真;

清除间隔(set _ timer);

}

}

//重置游戏

var reset=文档。查询选择器(# reset));

reset.addEventListener(click ,RES);

函数res() {

时间=0;

random _ d();

如果(暂停){

sta();

}

}

//随机打乱

函数random_d() {

for(var I=9;I 1;我- ) {

var to=parse int(数学。random()*(I-1)1);

//设置当前差异为随机产生的差异位置

if (d[i]!=0) {

文档。getelementbyid( d d[I]),样式。left=d _ posXY[to][0]“px”;

文档。getelementbyid( d d[I]),样式。top=d _ posXY[to][1] px ;

}

//设置随机产生的差异位置为当前差异位置

if (d[to]!=0) {

文档。getelementbyid( d d[to]),样式。left=d _ posXY[I][0]“px”;

文档。getelementbyid( d d[to]),样式。top=d _ posXY[I][1] px ;

}

//随机产生的差异与当前的差异编号互换

var temp=d[to];

d[to]=d[I];

d[I]=temp;

}

}

//初始化

window.addEventListener(load ,RES);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

js实现数字拼图方法,js拼接数字,js实现数字拼图