最近在手机上做了一个简单的拼图。代码简单易懂，让大家证明一切。

先看效果图：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' title document/title meta name=' viewport ' id=' viewport ' content=' width=device-width，initial-scale=1.0，user-scale=no ' style type=' text/CSS ' html，body，ul，li，ol，dl，dd，dt，p，h1，h2，h3，h4，h5，h6，form，fieldset，legend，img { margin:0padd :0粉色；} # pic box { width : 300 px h8 : 300 px background : URL(' img/300。jpg’)；相对位置：余量： 50px自动；}.pic { width: 97px高度： 97px向左浮动：背景： URL(' img/300。jpg’)；绝对位置：过渡：全部0.5s轻松0s；}.控制器{文本-对齐：中心；相对位置：} # times { position:绝对值颜色：红色；top : 15 pxleft : 300 pxfont-size : 20px；}/style/head dydiv class=' controller ' h1拼图游戏/h1按钮id=' go ' go/按钮span id=' times '/span/div div id=' picbox ' div class=' pic ' data-index=' 1 ' style=' background-position :0 px 0px；left :0 px ' top :0 px '/div div class=' pic ' data-index=' 2 ' style=' background-position :-100px 0px；left :100 px ' top :0 px '/div div class=' pic ' data-index=' 3 ' style=' background-position :-200px 0px；left :200 px ' top :0 px '/div div class=' pic ' data-index=' 4 ' style=' background-position :0 px-100px；left :0 px ' top :100 px '/div div class=' pic ' data-index=' 5 ' style=' background-position :-100px-100px；left :100 px ' top :100 px '/div div class=' pic ' data-index=' 6 ' style=' background-position :-200px-100px；left :200 px ' top :100 px '/div div class=' pic ' data-index=' 7 ' style=' background-position :0 px-200 px；left :0 px ' top :200 px '/div div class=' pic ' data-index=' 8 ' style=' background-position :-100px-200px；left :100 px ' top :200 px '/div div class=' pic ' data-index=' 9 ' style=' background-position :-200 px-200 px；left :200 px ' top :200 px '/div/divscriptvar picbox=document。GetElementByID(' picbox ')；var pic=文档。queryselectorall(' .pic’)；var picWidth=pic[0].offsettwidthvar picHeight=pic[0].偏右；var picbox宽度=picbox。用.抵消；var picbox高度=picbox。偏移光线；var go=文档。getelementbyid(' go ')；var times=文档。getelementbyid(' times ')；//定时。用于扩展var dx，dy，newLeft，newtop，startTime，endTimego。addeventlistener(' touch start '，function(){ start time=Date。解析(新的Date())；//获取到期1970年一月一日到当前时间的毫秒数，这个方法不常见，这里为试用for(var I=0；长度；I){ pic[I]。风格。display=' block//设置显示拼图，游戏开始} picbox。风格。背景=' # ffffor(var I=0；i20i ){ //随机打乱var a=数学。地板(数学。random()* 9)；var b=数学。地板(数学。random()* 9)；如果(一！=b){random(a，b)；}}})为(var I=0；ipic.lengthi ){pic[i].addEventListener('touchstart '，函数{这个。风格。zindex=100//设置拖拽元素的z指数值，使其在最上面。

dx=e . TargetTouch[0].第x页这个。offsetleft//记录触发拖拽的水平状态发生改变时的位置dy=e . TargetTouch[0].佩吉-这个。偏移顶部；//记录触发拖拽的垂直状态发生改变时的位置这个。startx=这个。offsetleft//记录当前初始状态水平发生改变时的位置这个。starty=这个。偏移顶部；//offsetTop等取得的值与这个。样式。左边获取的值区别在于前者不带px，后者带这是。风格。过渡=“无”；});pic[i].addEventListener('touchmove '，函数{ NewLeft=e . TargetTosses[0].pageX-dx；//记录拖拽的水平状态发生改变时的位置newtp=e . TargetTouch[0]。佩吉-迪；if(newLeft=-picWidth/2){ //限制边界代码块，拖拽区域不能超出边界的一半newLeft=-picWidth/2；} else if(new left=(pic box width-pic width/2)){ new left=(pic box width-pic width/2)；} if(newtonp=-pic高度/2){ newtonp=-pic宽度/2；} else if(newtonp=(pic box height-pic height/2)){ newtonp=(pic box height-pic height/2)；}这个。风格。left=NewLeft ' px这个。风格。top=newtonp ' px//设置目标元素的左侧，顶部});pic[i].addEventListener('touchend '，函数{这个。风格。Zin dex=0；this.style.transition='所有0.5s轻松0s”；//添加css3动画效果this.endX=e.changedTouches[0]。pageX-dx；this.endY=e.changedTouches[0].佩吉-迪；//记录滑动结束时的位置，与进入元素对比，判断与谁交换var obj=change(e.target，this.endX，this。endy)；//调用交换函数if(obj==e.target){ //如果交换函数返回的是自己物体。风格。左=这个。startx ' px物体。风格。top=这个。starty ' px}else{ //否则var _ left=obj。风格。向左；物体。风格。左=这个。startx ' px这个。风格。left=_ leftvar _ top=obj。风格。顶部；物体。风格。top=这个。starty ' px这个。风格。top=_ topvar _ index=obj。GetAttribute(' data-index ')；obj.setAttribute('data-index '，这个。GetAttribute(' data-index ')；this.setAttribute('data-index '，_ index)；//交换函数部分，可提取}});pic[i].addEventListener(' transitionend '，function(){ if(issus()){ console。日志('成功了!');//此处监听事件有臭虫，会添加上多次事件。}else{//pic[i].removeEventListener(' transitionend ')；} })}功能更改(obj，x，y){ //交换函数，判断拖动元素的位置是不是进入到目标原始1/2,这里采用绝对值得方式for(var I=0；ipic.lengthi ){ //还必须判断是不是当前原素本身。将自己排除在外if(Math.abs(pic[i]).offsetLeft-x)=pic宽度/2数学。防抱死制动系统.offsetTop-y)=picHeight/2pic[i]！=obj)返回pic[I]；}返回obj/返回当前}函数随机(a，b){ //随机打乱函数，其中交换部分，可以提取出来封装var AEle=pic[a]；var BeLe=pic[b]；var _ left_ left=aele。风格。向左；艾尔。风格。left=BeLe。风格。向左；贝利。风格。left=_ leftvar _ top_ top=aele。风格。顶部；艾尔。风格。top=BeLe。风格。顶部；贝利。风格。top=_ topvar _ index_ index=aele。GetAttribute(' data-index ')；aEle.setAttribute('data-index '，BeLe。GetAttribute(' data-index ')；bEle.setAttribute('data-index '，_ index)；}函数issuence ss(){//判断成功标准var str=' ' for(var I=0；ipic.lengthi ){str=pic[i].getAttribute(' data-index ')；} if(str==' 123456789 '){ return true；}返回false}可变时间；setInterval(函数(){ //定时函数，额。待续结束时间=日期。解析(新的Date())；时代周刊。innerhtml=(结束时间-开始时间)/1000 | | ' '；},1000)/脚本/正文/html代码还有很多可以优化的地方，比如增加定时功能，游戏成功效果和声音特效，手指滑动的自定义事件，左划右划，上划下划，进一步的封装等，额，这样一想又忍不住想试试敲敲代码了。后续小编在给大家持续更新吧，今天先到这里，希望大家能够喜欢！