去年写了一个用H5、Javascript、css3实现的拼图游戏。技术栈采用了自己封装的类Jquery框架Xuery，涉及到很多经典的javascript算法和css3特性，将大大提高你的编程能力。文末我也会放上源码的获取方法，大家可以学习体验一下。前言因为本应用是一款H5游戏，为了让项目更加轻量，我没有使用第三方的ui库。如果想使用基于vue的第三方手机ui库，推荐几个我之前用过的比较靠谱的。Spectrum：NutUI，薄荷饿了么推出的移动端ui组件库muse-ui，基于MaterialUI风格的移动端UI组件cube-ui，滴滴团队开发的移动端UI组件库vant。团队电商类移动端组件库atom-design原子类移动端ui组件库mand-mobile滴滴团队开发的基于金融场景的移动端ui组件库以上推荐社区比较完整，bug较少的组件图书馆，你可以感受到它。回到我们的小游戏开发，考的更多的是大家对javascript和css3的掌握程度。学习完这篇文章，相信大家对javascript和css3的编程能力都会有很大的提高。我将介绍如何使用画布实现生成记录海报的功能。先来看一下游戏的预览界面：本文的算法实现方法涉及到混洗算法、动态生成n维坐标、图像切割等，接下来介绍核心算法的实现。至于vue-cli的使用，笔者之前也写过相应的文章，大家可以研究学习。使用vue-cli搭建项目的方法如下：//installyarnglobaladd@vue/cli//创建项目vuecreatepinpinle//进入项目并启动cdpinpinle&&yarnstart关于vue-cli3配置的实战，可以搬个图片教你快速玩vue-cli3H5游戏核心功能介绍目前笔者主要整理了以下几个核心功能，接下来笔者将一一指导大家实现：实现纯javascript上传预览图片实现拼图分割功能实现混排算法实现生成记录海报功能1.实现纯javascript上传预览图片文件上传预览主要通过FileReaderAPI实现。其原理是将文件对象传递给FileReader的readAsDataURL，然后将其转换成data:URL格式（base64编码）的字符串来表示读取文件的内容。具体代码如下：//2.文件上传解析letfile=$('#file');file.on('change',function(e){varfile=this.files[0];varfileReader=newFileReader();//完成fileReader触发的读取事件。onload=function(e){$('.file-wrap')[0].style.backgroundImage='url('+fileReader.result+')';imgSrc=fileReader.result;}file&&fileReader.readAsDataURL(文件);})2.实现拼图分割功能。一般我们在处理这种拼图的时候有以下解决方案：使用canvas分割图片，使用n张不同的切片图片（方法简单，但是会造成多次请求）平衡动态背景分割后，作者想出了第三种方法，我觉得比较优雅，就是动态背景分割。我们只需要用1张图片，然后用css切图，有点经典sprite贴图的感觉如下：其实质就是我们设置了9个div，每个div都用了同一张图片，并且图片的大小等于游戏画布的大小，但是我们使用backgroundPosition（背景定位）来实现切图。这样做的另一个好处是方便我们实现洗牌逻辑。3.实现洗牌算法洗牌逻辑依赖于随机算法。这里我们结合坐标系来实现一个随机生成二维坐标系的逻辑。然后通过改变每个slice的translate位置，配合transition动画，实现shuffling。功能和随机播放动画。3.1数组重排序算法数组重排序比较简单，代码如下：//数组重排序functionupsetArr(arr){arr.sort(function(a,b){returnMath.random()>0.5?-1:1})}3.2洗牌逻辑洗牌逻辑是根据数组的随机顺序，具体逻辑如下：//洗牌方法functionshuffle(els,arr){upsetArr(arr);for(vari=0,len=els.length;i
