这篇文章主要为大家详细介绍了射流研究…实现数字拼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现数字拼图的具体代码，供大家参考，具体内容如下
重点：
游戏区分为8个div，进行游戏时需要判断点击的差异是否可移动，移动后判断游戏是否结束。
解决思路：将游戏界面看作一个差异大盒子，将大盒子分为9个区域进行编号，这9个区域的位置始终不变；8个差异以定位顶端和左边的控制其位置，设置9个区域的差异分别可以往哪个区域移动，点击时判断可移动的编号区域内是否有div，若有，则无法向该方向移动。每次移动后检查8个差异的编号是否与区域的编号完全重合，若重合，则通关。
运行情况
超文本标记语言
div id='容器'
！-最外面的DIV，用来包含里面的结构-
div id='游戏'
！-游戏区，也就是大差异方块-
div id='d1'1/div
div id='d2'2/div
div id='d3'3/div
div id='d4'4/div
div id=" D5 " 5/div
div id='d6'6/div
div id='d7'7/div
div id='d8'8/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)；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。