博主一直心心念念想做一个小游戏~ 前端时间终于做了一个小游戏,直到现在才来总结,哈哈~ 以后要勤奋点更新博客!
用之前的方法就是使用 photoshop 将图片切成相应大小的图片。这种做法不灵活,如果要更换图片的话,就得重新去切图,很麻烦。
现在是使用 canvas,图片是一整张 jpg 或者 png,把图片导入到 canvas 画布,然后再调用上下文 context 的 getImageData 方法,把图片处理成小图,这些小图就作为拼图的基本单位
- 1 renderImg: function(image) {
- 2
- var index = 0;
- 3
- for (var i = 0; i < 3; i++) {
- 4
- for (var j = 0; j < 3; j++) {
- 5 this.context.drawImage(image, 300 * j, 300 * i, 300, 600, 0, 0, 300, 300);
- 6 this.imgArr[index].src = this.canvas.toDataURL('image/jpeg');
- 7 this.imgArr[index].id = index;
- 8 index++;
- 9
- }
- 10
- }
- 11
- },
在刚刚生成的小图上面添加自定义属性 , 后期在小图被移动后再一个个判断,如果顺序是对的,那么这张大图就拼接成功, 允许进入下一关;
- 1 isSuccess: function() {
- 2
- var imgLikeArr = document.querySelectorAll('img'),
- 3 imgArr = Array.prototype.slice.call(imgLikeArr),
- 4 len = imgArr.length,
- i,
- 5 flag = true,
- self = this;
- 6 7
- for (i = 0; i < len; i++) {
- 8
- if (imgArr[i].id != i) {
- 9 flag = false;
- 10
- }
- 11
- }
- 12 13
- if (flag) {
- 14 setTimeout(function() {
- 15 self.showtip();
- 16
- },
- 200);
- 17
- }
- 18
- }
使用 math.random
- 1 randomImg: function() {
- 2 this.imgArr.sort(function() {
- 3
- return Math.random() - Math.random();
- 4
- });
- 5
- },
drag 知识点补充站:
兼容性:IE9+,主流浏览器,移动端所有型号暂不支持
实现元素的可拖拽.
- draggable="true"
设置拖拽数据
- dragstart
,
- copy
,
- move
- link
或者
- dragenter
取消浏览器默认行为使元素可拖放.
- dragover
事件执行所需操作
- drop
对象, 用于保存拖拽数据和交互信息. 以下是它的属性和方法.
- DataTransfer
: 以键值对设置数据, format 通常为数据格式, 如
- setData(format, data)
,
- text
- text/html
: 获取设置的对应格式数据, format 与 setData() 中一致
- getData(format)
实例代码:
- 1 //监听dragstart设置拖拽数据
- 2 on(contain, 'dragstart',
- function(e) {
- 3
- var target = getTarget(e);
- 4 5
- if (target.tagName.toLowerCase() == "img") {
- 6 e.dataTransfer.setData('id', e.target.id);
- 7
- }
- 8
- });
- 9 10 on(contain, 'drop',
- function(ev) {
- 11
- var target = getTarget(ev);
- 12 //交换图片
- 13
- if (target.tagName.toLowerCase() == "img") {
- 14
- var originObj = document.getElementById(ev.dataTransfer.getData('id'));
- 15
- var cache = {
- 16 'src': originObj.src,
- 17 'id': originObj.id 18
- };
- 19
- var endObj = ev.target.querySelector('img') || ev.target;
- 20 21 originObj.src = endObj.src;
- 22 originObj.id = endObj.id;
- 23 endObj.src = cache.src;
- 24 endObj.id = cache.id;
- 25 26
- if (originObj.id != endObj.id) {
- 27 self.changestep();
- 28
- }
- 29 30 self.isSuccess();
- 31
- }
- 32
- });
- 33 34 //取消浏览器默认行为使元素可拖放.
- 35 on(contain, 'dragover',
- function(ev) {
- 36 ev.preventDefault();
- 37
- });
核心代码和思路就是上面这些,其实整个流程走下来还是蛮简单的
有兴趣的可以上我的 ,欢迎 fork~star~
来源: http://www.cnblogs.com/beidan/p/puzzle.html