本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫
前言
為了加深大家對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搭建項目方式如下：
// 安裝
yarn global add @vue/cli
// 創建項目
vue create pinpinle
// 進入項目並啟動
cd pinpinle && yarn start
複製代碼
關於vue-cli3配置實戰，可以移步 一張圖教你快速玩轉vue-cli3
H5遊戲核心功能介紹
目前筆者主要整理樂如下核心功能，接下來筆者會一一帶大家實現：
實現純javascript上傳預覽圖片實現拼圖分割功能實現洗牌算法實現生成戰績海報功能1. 實現純javascript上傳預覽圖片
文件上傳預覽主要採用FileReader API實現，原理就是將file對象傳給FileReader的readAsDataURL然後轉化為data:URL格式的字符串（base64編碼）以表示所讀取文件的內容。 具體代碼如下：
// 2.文件上傳解析
let 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 && fileReader.readAsDataURL(file);
})
複製代碼
2. 實現拼圖分割功能
一般我們處理這種拼圖遊戲都會有如下方案：
用canvas分割圖片採用n張不同的切好的切片圖片（方法簡單，但是會造成多次請求）動態背景分割經過權衡，筆者想出了第三種方法，也是自認為比較優雅的方法，即動態背景分割，我們只需要使用1張圖片，然後利於css的方式切割圖片，有點經典的雪碧圖的感覺，如下：
本質就是我們設置九個div，每個div都使用同一張圖片，並且圖片大小等於遊戲畫布大小，但是我們通過backgroundPosition（背景定位）的方式來實現切割圖片。這樣做的另一個好處是方便我們實現洗牌邏輯。
3. 實現洗牌算法
洗牌邏輯依託於隨機算法，這裡我們結合坐標系，實現一個隨機生成二維坐標系的邏輯，然後通過改變每個切片的translate位置，配合過渡動畫，即可實現洗牌功能和洗牌動畫。
3.1 數組亂序算法
數組亂序比較簡單，代碼如下：
// 數組亂序
function upsetArr(arr) {
arr.sort(function(a,b){
return Math.random() > 0.5 ? -1 : 1
})
}
複製代碼
3.2 洗牌邏輯
洗牌邏輯基於數組亂序，具體邏輯如下：
// 洗牌方法
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'+ ')';
}
}
複製代碼
3.3 生成n緯矩陣坐標
n維矩陣主要用來做洗牌和計算成功率的，具體實現如下：
// 生成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
}
複製代碼
3.4 置換算法
置換算法主要用來切換拼圖的，比如用戶想移動拼圖，可以用過置換來實現：
// 數組置換
function swap(arr, indexA, indexB) {
let cache = arr[indexA];
arr[indexA] = arr[indexB];
arr[indexB] = cache;
}
複製代碼
4. 實現生成戰績海報功能
生成戰績海報筆者採用canvas來實現，對於canvas的api不熟悉的可以查看MDN，講的比較詳細。這裡筆者簡單實現一個供大家參考：
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 = '/piecePlay/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！')
}
}
複製代碼
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數據可視化等前端知識和實戰，歡迎在《趣談前端》一起學習討論，共同探索前端的邊界。