基于 Vue 实现一个有点意思的拼拼乐小游戏

// 安装
yarn global add @vue/cli
// 创建项目
vue create pinpinle
// 进入项目并启动
cd pinpinle && yarn start
复制代码

// 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);
})
复制代码

// 数组乱序
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'+ ')';
    }
}
复制代码

// 生成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) {
    let cache = arr[indexA];
    arr[indexA] = arr[indexB];
    arr[indexB] = cache;
}
复制代码

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！')
    }
}
复制代码