教你用200行代碼寫一個愛豆拼拼樂H5小遊戲（附源碼）

時間 2019-11-05

標籤代碼一個 h5 遊戲源碼欄目遊戲简体版

原文原文鏈接

前言

本文將帶你們一步步實現一個H5拼圖小遊戲，考慮到H5遊戲的輕量級和代碼體積，我沒有使用react或vue這些框架，而採用我本身寫的dom庫和原生javascript來實現業務功能，具體庫代碼可見個人文章如何用不到200行代碼寫一款屬於本身的js類庫，構建工具我採用了本身搭建的gulp4開發項目腳手架。你將學到：javascript

洗牌算法
洗牌動畫實現原理
用FileReader API實現本地預覽文件
用Canvas生成海報

零零總總花了半天的時間，但願對本身後面涉及H5遊戲有所幫助，也但願你們經過這篇文章有所收穫。前端

設計思路

效果演示

具體實現

接下來我將貼出每一步的核心代碼，供你們參考學習。vue

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 && fileReader.readAsDataURL(file);
    })
```
複製代碼

2.生成canvas海報

具體實現思路以下，canvas代碼後期會封裝成一個類，基本用法和思路大體以下：java

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實現洗牌動畫和拼圖切換的動畫，洗牌算法主要經過維護一個矩陣序列來實現。接下來是基本的工具方法：react

// 滑動元素,用於切換頁面
    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);
複製代碼

該遊戲的核心算法已經交給你們了，如想體驗真實遊戲，歡迎交流哈，若是想研究遊戲源碼，歡迎和我交流哈。vuex