滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片。
要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等。但是,使用了FlexBox布局以后,这都不需要你去考虑,浏览器会帮你做,FlexBox就是这么的强大。关于FlexBox的介绍可以点击这里。 这个游戏中要用的是FlexBox布局的order属性,order属性可以用来控制Flex项目的顺序。 这里我用九个canvas元素来把图片分成九等分,也可以用其他方法,比如背景图片定位:
滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片。
要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等。但是,使用了FlexBox布局以后,这都不需要你去考虑,浏览器会帮你做,FlexBox就是这么的强大。关于FlexBox的介绍可以点击这里。 这个游戏中要用的是FlexBox布局的order属性,order属性可以用来控制Flex项目的顺序。 这里我用九个canvas元素来把图片分成九等分,也可以用其他方法,比如背景图片定位:
如果不仅限于九宫格,还要十六宫格等,上面的元素完全可以动态生成。 下面是生成打乱顺序的九张图代码:
上面的关键代码是:
通过将数字打乱顺序,随机赋值给每个canvas元素的order属性,这样浏览器就自动帮你排序了。 关于代码的其他细节就不讲了,这里说一下怎样交换两张图片的位置,真是出乎意料的简单:
只需要交换双方的order属性值就可以了。
完整代码
大家做测试的时候,最好用谷歌模拟器或者手机打开,因为只支持移动端触摸事件。
原文链接:https://www.f2er.com/js/50089.html