html, body { height: 100%; } body { margin: 0; padding: 0; overflow: hidden; } .wrap { display: flex; flex-wrap: wrap; width: 100%; height: 100%; overflow: hidden; } .wrap canvas { width: 33.3333%; height: 33.3333%; border: 1px solid red; box-sizing: border-box; }

滑动拼图就是把一张图片分成几等份，打乱顺序（下图），然后通过滑动拼凑成一张完整的图片。

要实现一个拼图游戏，需要考虑怎样随机的打乱顺序，怎样交换两张图片的位置，等等。但是，使用了Flexbox布局以后，这都不需要你去考虑，浏览器会帮你做，Flexbox就是这么的强大。关于Flexbox的介绍可以点击这里。
这个游戏中要用的是Flexbox布局的order属性，order属性可以用来控制Flex项目的顺序。
这里我用九个canvas元素来把图片分成九等分，也可以用其他方法，比如背景图片定位：

如果不仅限于九宫格，还要十六宫格等，上面的元素完全可以动态生成。
下面是生成打乱顺序的九张图代码：

var drawImage = function (url) { return new Promise(function (resolve, reject) { var img = new Image(); img.onload = function () { resolve(img); }; img.src = url; }) }; drawImage("2.jpg").then(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 = $(".wrap").clientWidth / 3; item.height = $(".wrap").clientHeight / 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];

通过将数字打乱顺序，随机赋值给每个canvas元素的order属性，这样浏览器就自动帮你排序了。
关于代码的其他细节就不讲了，这里说一下怎样交换两张图片的位置，真是出乎意料的简单：

var order1 = item.style.order; var order2 = target.style.order;

只需要交换双方的order属性值就可以了。

完整代码

大家做测试的时候，最好用谷歌模拟器或者手机打开，因为只支持移动端触摸事件。

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

【javascript结合Flexbox简单实现滑动拼图游戏】相关文章：

★ javascript实现表格增删改操作实例详解

★ JavaScript实现自动变换表格边框颜色

★ javascript实现仿腾讯游戏选择

★ javascript实现dom动态创建省市纵向列表菜单的方法

★ javascript实现动态改变层大小的方法

★ JavaScript实现添加、查找、删除元素

★ JavaScript基于setTimeout实现计数的方法

★ Javascript中prototype属性实现给内置对象添加新的方法

★ javascript基于DOM实现权限选择实例分析

★ javascript瀑布流布局实现方法详解