教你用200行代码写一个爱豆拼拼乐H5小游戏（附源码）

前言

本文将带大家一步步实现一个H5拼图小游戏，考虑到H5游戏的轻量级和代码体积，我没有使用react或vue这些框架，而采用我自己写的dom库和原生javascript来实现业务功能，具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库，构建工具我采用了自己搭建的gulp4开发项目脚手架。你将学到：

洗牌算法
洗牌动画实现原理
用FileReader API实现本地预览文件
用Canvas生成海报

零零总总花了半天的时间，希望对自己后面涉及H5游戏有所帮助，也希望大家通过这篇文章有所收获。

设计思路

效果演示

具体实现

接下来我将贴出每一步的核心代码，供大家参考学习。

1.文件上传解析

``` js	
// 文件上传解析	
    var file = $('#file');	
    file.on('change', function(e){	
        var file = this.files[0];	
        var fileReader = new FileReader();	
        // 读取完成触发的事件	
        fileReader.onload = function(e) {	
            $('.file-wrap')[0].style.backgroundImage = 'url(' + fileReader.result + ')';	
            imgSrc = fileReader.result;	
        }	

	
        file &amp;&amp; fileReader.readAsDataURL(file);	
    })	
```

2.生成canvas海报

具体实现思路如下，canvas代码后期会封装成一个类，基本用法和思路大致如下：

function generateImg() {	
        var canvas = document.createElement("canvas");	
        	
        if(canvas.getContext) {	
            var winW = window.innerWidth,	
                winH = window.innerHeight,	
            ctx = canvas.getContext('2d');	
            canvas.width = winW;	
            canvas.height = winH;	

	
            // 绘制背景	
            // ctx.fillStyle = '#06c';	
            var linear = ctx.createLinearGradient(0, 0, 0, winH);	
            linear.addColorStop(0, '#a1c4fd');	
            linear.addColorStop(1, '#c2e9fb');	
            ctx.fillStyle = linear;	
            ctx.fillRect(0, 0, winW, winH);	
            ctx.fill();	

	
            // 绘制顶部图像	
            var imgH = 0;	
            img = new Image();	
            img.src = imgSrc;	
            img.onload = function(){	
                // 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW	
                imgH = .6*winW*this.height/this.width;	
                ctx.drawImage(img, .2*winW, .1*winH, .6*winW, imgH);	

	
                drawText();	
                drawTip();	
                drawCode();	
            }	

	
            // 绘制文字	
            function drawText() {	
                ctx.save();	
                ctx.fillStyle = '#fff';	
                ctx.font = 20 + 'px Helvetica';	
                ctx.textBaseline = 'hanging';	
                ctx.textAlign = 'center';	
                ctx.fillText('我只用了' + (180 -dealtime) + 's,' + '快来挑战！', winW/2, .15*winH + imgH);	
                ctx.restore();	
            }	

	
            // 绘制提示文字	
            function drawTip() {	
                ctx.save();	
                ctx.fillStyle = '#000';	
                ctx.font = 14 + 'px Helvetica';	
                ctx.textBaseline = 'hanging';	
                ctx.textAlign = 'center';	
                ctx.fillText('关注下方公众号回复【拼拼乐】开始游戏', winW/2, .25*winH + imgH);	
                ctx.restore();	
            }	

	

	
            // 绘制二维码	
            function drawCode() {	
                var imgCode = new Image();	
                imgCode.src = './images/logo.png';	
                imgCode.onload = function(){	
                    ctx.drawImage(imgCode, .35*winW, .3*winH + imgH, .3*winW, .3*winW);	
    	
                    // 生成预览图	
                    var img = new Image();	
                    img.src= convertCanvasToImage(canvas, 1).src;	
                    img.className = 'previewImg';	
                    img.onload = function(){	
                        $('.preview-page')[0].appendChild(this);	
                        startDx = startDx - 100;	
                        transformX(wrap, startDx + 'vw');	
                    }	
                }	
            }	
            	

	
            	
            	
        } else {	
            alert('浏览器不支持canvas！')	
        }	
    }	
    	
    // 将canvas转化为图片	
    function convertCanvasToImage(canvas, quality) {	
        var image = new Image();	
        image.src = canvas.toDataURL("image/png", quality);	
        return image;	
    }

3.切换元素动画和洗牌算法

我们用transform实现洗牌动画和拼图切换的动画，洗牌算法主要通过维护一个矩阵序列来实现。接下来是基本的工具方法：

// 滑动元素,用于切换页面	
    function transformX(el, dx) {	
        el.style.transform = 'translateX(' + dx + ')';	
    }	
    	
// 生成n维矩阵	
    function generateMatrix(n, dx, dy) {	
        var arr = [], index = 0;	
        for(var i = 0; i&lt; n; i++) {	
            for(var j=0; j&lt; n; j++) {	
                arr.push({x: j*dx, y: i*dy, index: index});	
                index++;	
            }	
        }	
        return arr	
    }	
    	
// 数组置换	
    function swap(arr, indexA, indexB) {	
        var cache = arr[indexA];	
        arr[indexA] = arr[indexB];	
        arr[indexB] = cache;	
    }	
    	
// 数组乱序	
    function upsetArr(arr) {	
        arr.sort(function(a,b){	
            return Math.random() &gt; 0.5 ? -1 : 1	
        })	
    }	
    	
// 洗牌方法	
    function shuffle(els, arr) {	
        upsetArr(arr);	
        for(var i=0, len=els.length; i&lt; len; i++) {	
            var el = els[i];	
            el.setAttribute('index', i);  // 将打乱后的数组索引缓存到元素中	
            el.style.transform = 'translate(' + arr[i].x + 'vw,' + arr[i].y + 'vh'+ ')';	
        }	
    }	
    	
// 校验是否成功方法	
    function isTestSuccess(arr) {	
        return arr.every(function(item, i){ return item.index === i })	
    }	
//

有了工具方法，我们可以通过如下调用实现洗牌：

//初始数组	
let pool = generateMatrix(3, 28, 20);	
// 洗牌 pieces是拼图的dom集合	
shuffle(pieces, pool);

该游戏的核心算法已经交给大家了，如想体验真实游戏，欢迎交流哈，如果想研究游戏源码，欢迎和我交流哈。

公众号后台回复：拼拼乐 体验游戏