基于Vue实现一个有点意思的拼拼乐小游戏

笔者去年曾写过一个类似的拼拼乐小游戏，技术栈采用自己的Xuery框架和原生javascript实现的，脚手架采用gulp来实现，为了满足对vue的需求，笔者再次使用vue生态将其重构，脚手架采用比较火的vue-cli。

前言

为了加深大家对vue的了解和vue项目实战，笔者采用vue生态来重构此项目，方便大家学习和探索。技术栈如下：

• vue-cli4 基于vue的脚手架
• Xuery 笔者基于原生js二次封装的dom库
• vue mvvm库

因为该应用属于H5游戏，为了清亮化笔者没有采用第三方ui库， 如果大家想采用基于vue的第三方移动端ui库，笔者推荐如下：

• Mint 饿了么推出的移动端ui库
• NutUI 一套京东风格的移动端组件库
• muse-ui 基于MaterialUI风格的移动端UI组件
• cube-ui 滴滴团队开发的移动端UI组件库
• vant 有赞团队的电商风格的移动端组件库
• atom-design atom风格的移动端ui组件库
• mand-mobile 滴滴团队研发的基于金融场景的移动端ui组件库

以上笔者推荐的都是社区比较完善，bug比较少的组件库，大家可以感受一下。

回到我们的小游戏开发，我们更多的是javascript和css3的掌握程度，在学习完这篇文章之后相信大家对javascript和css3的编程能力都会有极大的提升，后面还会介绍如何使用canvas实现生成战绩海报图的功能。

正文

我们先来看看游戏的预览界面： 在线体验地址：传送门

本文的算法实现方式在之前的拼拼乐文章中已经说明，这里主要介绍核心算法， 至于vue-cli的使用方法，笔者之前也写过对应的文章，大家可以研究学习一下。vue-cli搭建项目方式如下：

1// 安装
2yarn global add @vue/cli
3
4// 创建项目
5vue create pinpinle
6
7// 进入项目并启动
8cd pinpinle && yarn start

关于vue-cli3配置实战，可以移步 一张图教你快速玩转vue-cli3

H5游戏核心功能介绍

目前笔者主要整理乐如下核心功能，接下来笔者会一一带大家实现：

• 实现纯javascript上传预览图片
• 实现拼图分割功能
• 实现洗牌算法
• 实现生成战绩海报功能

1. 实现纯javascript上传预览图片

文件上传预览主要采用FileReader API实现，原理就是将file对象传给FileReader的readAsDataURL然后转化为data:URL格式的字符串（base64编码）以表示所读取文件的内容。 具体代码如下：

1// 2.文件上传解析
2let file = $('#file');
3file.on('change', function(e){
4    var file = this.files[0];
5    var fileReader = new FileReader();
6    // 读取完成触发的事件
7    fileReader.onload = function(e) {
8        $('.file-wrap')[0].style.backgroundImage = 'url(' + fileReader.result + ')';
9        imgSrc = fileReader.result;
10    }
11
12    file && fileReader.readAsDataURL(file);
13})

2. 实现拼图分割功能

一般我们处理这种拼图游戏都会有如下方案：

• 用canvas分割图片
• 采用n张不同的切好的切片图片（方法简单，但是会造成多次请求）
• 动态背景分割

经过权衡，笔者想出了第三种方法，也是自认为比较优雅的方法，即动态背景分割，我们只需要使用1张图片，然后利于css的方式切割图片，有点经典的雪碧图的感觉，如下： 本质就是我们设置九个div，每个div都使用同一张图片，并且图片大小等于游戏画布大小，但是我们通过backgroundPosition（背景定位）的方式来实现切割图片。这样做的另一个好处是方便我们实现洗牌逻辑。

3. 实现洗牌算法

洗牌逻辑依托于随机算法，这里我们结合坐标系，实现一个随机生成二维坐标系的逻辑，然后通过改变每个切片的translate位置，配合过渡动画，即可实现洗牌功能和洗牌动画。

3.1 数组乱序算法

数组乱序比较简单，代码如下：

1// 数组乱序
2function upsetArr(arr) {
3    arr.sort(function(a,b){
4        return Math.random() > 0.5 ? -1 : 1
5    })
6}

3.2 洗牌逻辑

洗牌逻辑基于数组乱序，具体逻辑如下：

1// 洗牌方法
2function shuffle(els, arr) {
3    upsetArr(arr);
4    for(var i=0, len=els.length; i< len; i++) {
5        var el = els[i];
6        el.setAttribute('index', i);  // 将打乱后的数组索引缓存到元素中
7        el.style.transform = 'translate(' + arr[i].x + 'vw,' + arr[i].y + 'vh'+ ')';
8    }
9}

3.3 生成n纬矩阵坐标

n维矩阵主要用来做洗牌和计算成功率的，具体实现如下：

1// 生成n维矩阵坐标
2function generateMatrix(n, dx, dy) {
3    var arr = [], index = 0;
4    for(var i = 0; i< n; i++) {
5        for(var j=0; j< n; j++) {
6            arr.push({x: j*dx, y: i*dy, index: index});
7            index++;
8        }
9    }
10    return arr
11}

3.4 置换算法

置换算法主要用来切换拼图的，比如用户想移动拼图，可以用过置换来实现：

1 // 数组置换
2function swap(arr, indexA, indexB) {
3    let cache = arr[indexA];
4    arr[indexA] = arr[indexB];
5    arr[indexB] = cache;
6}

4. 实现生成战绩海报功能

生成战绩海报笔者采用canvas来实现，对于canvas的api不熟悉的可以查看MDN，讲的比较详细。这里笔者简单实现一个供大家参考：

1function generateImg() {
2    var canvas = document.createElement("canvas");
3
4    if(canvas.getContext) {
5        var winW = window.innerWidth,
6            winH = window.innerHeight,
7        ctx = canvas.getContext('2d');
8        canvas.width = winW;
9        canvas.height = winH;
10
11        // 绘制背景
12        // ctx.fillStyle = '#06c';
13        var linear = ctx.createLinearGradient(0, 0, 0, winH);
14        linear.addColorStop(0, '#a1c4fd');
15        linear.addColorStop(1, '#c2e9fb');
16        ctx.fillStyle = linear;
17        ctx.fillRect(0, 0, winW, winH);
18        ctx.fill();
19
20        // 绘制顶部图像
21        var imgH = 0;
22        img = new Image();
23        img.src = imgSrc;
24        img.onload = function(){
25            // 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW
26            imgH = .6*winW*this.height/this.width;
27            ctx.drawImage(img, .2*winW, .1*winH, .6*winW, imgH);
28
29            drawText();
30            drawTip();
31            drawCode();
32        }
33
34        // 绘制文字
35        function drawText() {
36            ctx.save();
37            ctx.fillStyle = '#fff';
38            ctx.font = 20 + 'px Helvetica';
39            ctx.textBaseline = 'hanging';
40            ctx.textAlign = 'center';
41            ctx.fillText('我只用了' + (180 -dealtime) + 's,' + '快来挑战！', winW/2, .15*winH + imgH);
42            ctx.restore();
43        }
44
45        // 绘制提示文字
46        function drawTip() {
47            ctx.save();
48            ctx.fillStyle = '#000';
49            ctx.font = 14 + 'px Helvetica';
50            ctx.textBaseline = 'hanging';
51            ctx.textAlign = 'center';
52            ctx.fillText('关注下方二维码开始游戏', winW/2, .25*winH + imgH);
53            ctx.restore();
54        }
55
56
57        // 绘制二维码
58        function drawCode() {
59            var imgCode = new Image();
60            imgCode.src = '/piecePlay/images/logo.png';
61            imgCode.onload = function(){
62                ctx.drawImage(imgCode, .35*winW, .3*winH + imgH, .3*winW, .3*winW);
63
64                // 生成预览图
65                var img = new Image();
66                img.src= convertCanvasToImage(canvas, 1).src;
67                img.className = 'previewImg';
68                img.onload = function(){
69                    $('.preview-page')[0].appendChild(this);
70                    startDx = startDx - 100;
71                    transformX(wrap, startDx + 'vw');
72                }
73            }
74        }  
75    } else {
76        alert('浏览器不支持canvas！')
77    }
78}

H5拼图小游戏笔者已在github开源， 感兴趣的可以学习参考。以上的逻辑部分的代码可以直接整合到vue项目中即可，由于实现比较简单， 这里笔者就不详细介绍了。

H5可视化编辑器Dooring功能迭代说明

目前笔者实现的H5可视化编辑器H5-Dooring功能新增如下：

• 实时保存功能
• 添加进度条组件
• 添加websocket通信
• 实现在线下载代码功能

预览地址：基于React+Koa实现一个h5页面可视化编辑器－Dooring

github地址：基于React+Koa实现一个h5页面可视化编辑器－Dooring

最后

如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。

更多推荐

• 基于React+Koa实现一个h5页面可视化编辑器－Dooring
• 深度剖析github star数15.1k的开源项目redux-thunk
• TS核心知识点总结及项目实战案例分析