在来测试排序

2021-05-28 54次

博主一直心心念念想做一个小游戏~  前端时间终于做了一个小游戏,直到现在才来总结,哈哈~ 以后要勤奋点更新博客!

 

实现原理

1.如何切图?

用之前的方法就是使用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         },
复制代码

 

2.如何判断游戏是否结束?

在刚刚生成的小图上面添加自定义属性 , 后期在小图被移动后再一个个判断,如果顺序是对的,那么这张大图就拼接成功, 允许进入下一关;

复制代码
 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         }
复制代码

 

3.如何实现小图片随机排列?

使用math.random

1 randomImg: function () {2             this.imgArr.sort(function () {3                 return Math.random() - Math.random();4             });5         },

 

4.拖拽功能实现?

drag知识点补充站:

兼容性:IE9+,主流浏览器,移动端所有型号暂不支持

一个完整的drag and drop流程通常包含以下几个步骤:

  1. 设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽
  2. 监听dragstart设置拖拽数据
  3. 设置允许的拖放效果,如copy,move,link
  4. 设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放.
  5. 监听drop事件执行所需操作

拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.

  • setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html
  • getData(format): 获取设置的对应格式数据,format与setData()中一致

 

实例代码:

复制代码
 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.id18                     };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             });
复制代码

 

核心代码和思路就是上面这些,其实整个流程走下来还是蛮简单的

有兴趣的可以上我的github  ,欢迎fork~star~  


热门文章
热门文章