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

前端之家收集整理的这篇文章主要介绍了javascript结合Flexbox简单实现滑动拼图游戏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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,item.width,item.height);
});
});

上面的关键代码是:

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

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

完整代码

Meta charset="UTF-8">

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

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

猜你在找的JavaScript相关文章