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

• 洗牌算法
• 洗牌动画实现原理
• 用Canvas生成海报

### 具体实现

#### 1.文件上传解析

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

})
```

#### 2.生成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);
ctx.fillStyle = linear;
ctx.fillRect(0, 0, winW, winH);
ctx.fill();

// 绘制顶部图像
var imgH = 0;
img = new Image();
img.src = imgSrc;
// 绘制的图片宽为.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';
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';
\$('.preview-page')[0].appendChild(this);
startDx = startDx - 100;
transformX(wrap, startDx + 'vw');
}
}
}

} else {
}
}

// 将canvas转化为图片
function convertCanvasToImage(canvas, quality) {
var image = new Image();
image.src = canvas.toDataURL("image/png", quality);
return image;
}

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

``````// 滑动元素,用于切换页面
function transformX(el, dx) {
el.style.transform = 'translateX(' + dx + ')';
}

// 生成n维矩阵
function generateMatrix(n, dx, dy) {
var arr = [], index = 0;
for(var i = 0; i< n; i++) {
for(var j=0; j< 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() > 0.5 ? -1 : 1
})
}

// 洗牌方法
function shuffle(els, arr) {
upsetArr(arr);
for(var i=0, len=els.length; i< 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);