Flexbox + js实现滑动拼图游戏
2015-08-23 20:10
921 查看
滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片。
要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等。但是,使用了Flexbox布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox就是这么的强大。关于Flexbox的介绍可以点击这里。
这个游戏中要用的是Flexbox布局的
这里我用九个
如果不仅限于九宫格,还要十六宫格等,上面的元素完全可以动态生成。
下面是生成打乱顺序的九张图代码:
上面的关键代码是:
通过将数字打乱顺序,随机赋值给每个
关于代码的其他细节就不讲了,这里说一下怎样交换两张图片的位置,真是出乎意料的简单:
只需要交换双方的
完整代码可以在这里查看。
DEMO可以点击这里,最好用谷歌模拟器或者手机打开,因为只支持移动端触摸事件。
代码中只实现了基本功能,并没有实现完整功能。
要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等。但是,使用了Flexbox布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox就是这么的强大。关于Flexbox的介绍可以点击这里。
这个游戏中要用的是Flexbox布局的
order属性,
order属性可以用来控制Flex项目的顺序。
这里我用九个
canvas元素来把图片分成九等分,也可以用其他方法,比如背景图片定位:
<div class="wrap"> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> </div>
如果不仅限于九宫格,还要十六宫格等,上面的元素完全可以动态生成。
下面是生成打乱顺序的九张图代码:
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; item.style.order = order2; target.style.order = order1;
只需要交换双方的
order属性值就可以了。
完整代码可以在这里查看。
DEMO可以点击这里,最好用谷歌模拟器或者手机打开,因为只支持移动端触摸事件。
代码中只实现了基本功能,并没有实现完整功能。
相关文章推荐
- js面向对象
- Github项目中使用率最高的Java/Ruby/JS库(转)
- JavaScript语言基础知识11
- Jsoup解析HTML实例及文档方法详解
- js的定时器
- BackboneJs入门学习[02]---Model初探
- Extjs4处理后台json数据中日期和时间的方法
- Json.NET提供依赖注
- JavaScript 中的闭包(closure)是什么鬼?
- javascript对象
- JSP 笔记
- js算法:分治法-归并排序
- JavaScript——关于画布元素canvas的使用
- JSON详解
- BackboneJS入门学习[01]---预热
- JS的HTML DOM disabled 属性
- javascript 如何访问 action或者controller 传给 jsp 页面的值
- 【js】JSON.stringify 语法实例讲解
- jsp基础语法
- JavaScript添加事件