滑动拼图是将一张图片分成几个相等的部分，打乱顺序(如下图)，然后滑动拼凑出一张完整的图片。

要实现一个拼图，需要考虑如何随机打乱顺序，如何交换两张图片的位置等等。但是，使用Flexbox布局后，就不需要考虑了。浏览器会帮助你。Flexbox太强大了。有关Flexbox的介绍，请单击此处。在这个游戏中，我们将使用Flexbox布局的order属性，它可以用来控制Flex项目的顺序。在这里，我使用了九个画布元素将图片分成九个相等的部分，但我也可以使用其他方法，例如背景图片定位：

class=' wrap ' canvas/canvas canvas/canvas canvas/canvas canvas/canvas canvas/canvas canvas/div如果不限于9个方块，也可以是16个方块，以上元素可以动态生成。下面是生成无序序列的九个代码图：

var drawImage=function (url) {返回新的Promise(function(解析，拒绝){ var img=new Image()；img . onload=function(){ resolve(img)；};img.src=url})};drawImage('2.jpg ')。然后(function (img) { var arr=[1，2，3，4，5，6，7，8，9]；var random=arr . sort(function(){ return math . random()0.5 })；[]. foreach . call(document . queryselectorall(' canvas ')，function (item，i) { item.width=$(')。换行')。client width/3；item.height=$('。换行')。client height/3；item . style . order=random[I]；var CTX=item . GetContext(' 2d ')；ctx.drawImage(img，img.width * (i % 3)/3，img.height * Math.floor(i/3)/3，img.width/3，img.height/3，0，0，item.width，item . height)；});});上面的关键代码是：

item . style . order=random[I]；通过为每个画布元素的顺序属性随机分配数字，浏览器将自动为您对它们进行排序。我不会谈论代码的其他细节。在这里谈论如何交换两张图片的位置是非常简单的：

var order 1=item . style . order；var order 2=target . style . order；只需交换双方的订单属性值。

完全码

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' meta content=' width=设备-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=0 ' name=' viewport '/meta content=' yes ' name=' apple-mobile-web-app-ability '/meta content=' black ' name=' apple-mobile-web-app-status-bar-style '/meta content=' phone=no ' name=' format-detection '/title/title style html，padd : 0；飞越：隐藏；} .包装{ display:灵活柔性包装：包装；宽度： 100%;高度： 100%;飞越：隐藏；} .包裹帆布{宽度： 33.3333%;高： 33.3333%;border: 1px纯红；盒子尺寸：边框盒子；}/style/head dydiv class=' wrap ' canvas data-value=' 1 '/canvas canvas data-value=' 2 '/canvas canvas data-value=' 3 '/canvas canvas data-value=' 4 '/canvas canvas data-value=' 5 '/canvas canvas data-value=' 6 '/canvas canvas data-value=' 7 '/canvas canvas canvas data-value=' 9 '/canvas/div script var $=function(El){ return documequery selector(El)；};var touchMove，Touchendvar draw image=function(URL){ 0返回新的Promise(函数(解析，拒绝){ var img=new Image()；img。onload=function(){ resolve(img)；};img . src=URL })}；drawImage('2.jpg ').然后(function (img) { var arr=[1，2，3，4，5，6，7，8，9]；var random=arr。sort(function(){ return math。random()0.5 })；[].foreach。调用(文档。queryselectorall(' canvas ')，函数(item，i) { item.width=$(').换行')。客户端宽度/3；item.height=$(' .换行')。客户身高/3；项目。风格。顺序=随机[I]；var CTX=item。GetContext(' 2d ')；ctx.drawImage(img，img.width * (i % 3)/3，img.height * Math.floor(i/3)/3，img.width/3，img.height/3，0，0，item.width，item。高度)；});});文件。addeventlistener('触摸开始'，函数{ var target=e . target如果(例如目标。标记名。tolowercase()！==' canvas '){ return；} var CTX=target。GetContext(' 2d ')；var image=ctx.getImageData(0，0，target.width，target。高度)；var obj=target。克隆诺得(真)；obj.getContext('2d ').putImageData(图像，0,0);var top=目标。getboundingclientrect().顶部，左侧=target.getBoundingClientRect().向左；物体。风格。CSS文本='位置：绝对；top: '顶部' pxleft: '左侧' pxdocument。尸体。append child(obj)；var point={ ' x ' : e . touch[0].pageX，y ' : e .触摸[0].pageY }；文件。addeventlistener(' touch move '，touch move=function(e){ obj。风格。CSS文本='位置：绝对；top : '(例如触摸[0]).佩吉点。y top)' px；左： '(即触摸[0]).x点。x左)' px '；});文件。addeventlistener(' touch end '，touch end=function(e){ var pos={ ' x ' : e . changed touch[0]).pageX，' y': e.changedTouches[0].pageY }；[].foreach。调用(文档。queryselectorall(').wrap canvas’)，function (item，I){ var offset=item。getboundingclientrect()；如果(位置。x偏移量。左侧位置。x(偏移量。左侧项目。宽度)位置。y偏移。顶部位置。y(偏移量。最重要的项目。高度){ var order 1=项目。风格。秩序；var订单2=目标。风格。秩序；如果。父节点){ document。尸体。移除子对象；}项。风格。订单=订单2；目标。风格。订单=订单1；} });文件。removeeventlistener(' touch move '，touch move)；文件。removeeventlistener(' touch end '，touch end)；})})/脚本/正文/html大家做测试的时候，最好用谷歌模拟器或者手机打开，因为只支持移动端触摸事件。

代码中只实现了基本功能，并没有实现完整功能。