javascript结合Flexbox简单实现滑动拼图游戏_javascript技巧

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

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

上面的关键代码是：

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

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

完整代码

javascript结合Flexbox简单实现滑动拼图游戏_javascript技巧

javascript结合Flexbox简单实现滑动拼图游戏_javascript技巧:滑动拼图就是把一张图片分成几等份，打乱顺序（下图），然后通过滑动拼凑成一张完整的图片。 要实现一个拼图游戏，需要考虑怎样随机的打乱顺序，怎样交换两张图片的位置，等等。但是，使用了Flexbox布局以后，这都不需要你去考虑，浏览器会帮你做，Flex

推荐度：

点击下载本文 文档为doc格式