九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

原創(chuàng) 徐小夕 趣談前端 2023-11-29 08:09 發(fā)表于重慶

前言

本文將帶大家一步步實現(xiàn)一個H5拼圖小游戲，考慮到H5游戲的輕量級和代碼體積，我沒有使用react或vue這些框架，而采用我自己寫的dom庫和原生javascript來實現(xiàn)業(yè)務(wù)功能，具體庫代碼可見我的文章如何用不到200行代碼寫一款屬于自己的js類庫，構(gòu)建工具我采用了自己搭建的gulp4開發(fā)項目腳手架。你將學到：

洗牌算法

洗牌動畫實現(xiàn)原理

用FileReader API實現(xiàn)本地預(yù)覽文件

用Canvas生成海報零零總總花了半天的時間，希望對自己后面涉及H5游戲有所幫助，也希望大家通過這篇文章有所收獲。

設(shè)計思路

效果演示

具體實現(xiàn)

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

1.文件上傳解析

``` js// 文件上傳解析 var file = $('#file'); file.on('change', function(e){ var file = this.files[0]; var fileReader = new FileReader(); // 讀取完成觸發(fā)的事件 fileReader.onload = function(e) { $('.file-wrap')[0].style.backgroundImage = 'url(' + fileReader.result + ')'; imgSrc = fileReader.result; }

file && fileReader.readAsDataURL(file); })```

2.生成canvas海報

具體實現(xiàn)思路如下，canvas代碼后期會封裝成一個類，基本用法和思路大致如下：

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, 根據(jù)等比換算繪制的圖片高度為 .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,' + '快來挑戰(zhàn)！', 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('關(guān)注下方公眾號回復(fù)【拼拼樂】開始游戲', 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); // 生成預(yù)覽圖 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轉(zhuǎn)化為圖片 function convertCanvasToImage(canvas, quality) { var image = new Image(); image.src = canvas.toDataURL("image/png", quality); return image; }

3.切換元素動畫和洗牌算法

我們用transform實現(xiàn)洗牌動畫和拼圖切換的動畫，洗牌算法主要通過維護一個矩陣序列來實現(xiàn)。接下來是基本的工具方法：// 滑動元素,用于切換頁面    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    }    // 數(shù)組置換    function swap(arr, indexA, indexB) {        var cache = arr[indexA];        arr[indexA] = arr[indexB];        arr[indexB] = cache;    }    // 數(shù)組亂序    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);  // 將打亂后的數(shù)組索引緩存到元素中            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 })    }//

有了工具方法，我們可以通過如下調(diào)用實現(xiàn)洗牌：//初始數(shù)組let pool = generateMatrix(3, 28, 20);// 洗牌 pieces是拼圖的dom集合shuffle(pieces, pool);

該游戲的核心算法已經(jīng)交給大家了，如想體驗真實游戲，歡迎交流哈，如果想研究游戲源碼，歡迎和我交流哈。

源碼地址: https://gitee.com/lowcode-china/lianliankan