基於Vue實現一個有點意思的拼拼樂小遊戲

筆者去年曾寫過一個相似的拼拼樂小遊戲，技術棧採用本身的Xuery框架和原生javascript實現的，腳手架採用gulp來實現，爲了知足對vue的需求，筆者再次使用vue生態將其重構，腳手架採用比較火的vue-cli。javascript

前言

爲了加深你們對vue的瞭解和vue項目實戰，筆者採用vue生態來重構此項目，方便你們學習和探索。技術棧以下：css

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遊戲核心功能介紹

目前筆者主要整理樂以下核心功能，接下來筆者會一一帶你們實現：vue

實現純javascript上傳預覽圖片
實現拼圖分割功能
實現洗牌算法
實現生成戰績海報功能

1. 實現純javascript上傳預覽圖片

文件上傳預覽主要採用FileReader API實現，原理就是將file對象傳給FileReader的readAsDataURL而後轉化爲data:URL格式的字符串（base64編碼）以表示所讀取文件的內容。具體代碼以下：java

    
 
    // 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. 實現拼圖分割功能

通常咱們處理這種拼圖遊戲都會有以下方案：node

用canvas分割圖片
採用n張不一樣的切好的切片圖片（方法簡單，可是會形成屢次請求）
動態背景分割

通過權衡，筆者想出了第三種方法，也是自認爲比較優雅的方法，即動態背景分割，咱們只須要使用1張圖片，而後利於css的方式切割圖片，有點經典的雪碧圖的感受，以下：

本質就是咱們設置九個div，每一個div都使用同一張圖片，而且圖片大小等於遊戲畫布大小，可是咱們經過backgroundPosition（背景定位）的方式來實現切割圖片。這樣作的另外一個好處是方便咱們實現洗牌邏輯。webpack

3. 實現洗牌算法

洗牌邏輯依託於隨機算法，這裏咱們結合座標系，實現一個隨機生成二維座標系的邏輯，而後經過改變每一個切片的translate位置，配合過渡動畫，便可實現洗牌功能和洗牌動畫。css3

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，講的比較詳細。這裏筆者簡單實現一個供你們參考：git

    
 
    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項目中便可，因爲實現比較簡單，這裏筆者就不詳細介紹了。github

H5可視化編輯器Dooring功能迭代說明

目前筆者實現的H5可視化編輯器H5-Dooring功能新增以下：

實時保存功能
添加進度條組件
添加websocket通訊
實如今線下載代碼功能

預覽地址：基於React+Koa實現一個h5頁面可視化編輯器－Dooring

github地址：基於React+Koa實現一個h5頁面可視化編輯器－Dooring

最後

若是想學習更多H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰，歡迎在《趣談前端》一塊兒學習討論，共同探索前端的邊界。