[[417629]]

我去年曾寫過一個用H5，Javascript，css3實現的拼拼樂小游戲，技術棧采用自己封裝的類Jquery框架 Xuery ，其中涉及到了很多經典的 javascript 算法和css3特性 ，對大家的編程能力會有很大的提高，文末我也會放上源碼獲取方式，大家可以學習體驗一下。

前言

因為該應用屬于 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 實現生成戰績海報圖的功能。

正文

我們先來看看游戲的預覽界面：

本文的算法實現方式涉及到洗牌算法，動態生成n維坐標，圖片切割等，接下來會介紹核心算法的實現， 至于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 置換算法

置換算法主要用來切換拼圖的，比如用戶想移動拼圖，可以用過置換來實現：

// 數組置換 
unction 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項目中即可，由于實現比較簡單，這里筆者就不詳細介紹了。

本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯系趣談前端公眾號。