前言
本文將帶大家一步步實現一個H5拼圖小遊戲，考慮到H5遊戲的輕量級和程式碼體積，我沒有使用react或vue這些框架，而採用我自己寫的dom庫和原生javascript來實現業務功能，具體庫程式碼可見我的文章如何用不到200行程式碼寫一款屬於自己的js類庫，構建工具我採用了自己搭建的gulp4開發專案腳手架。你將學到：
- 洗牌演算法
- 洗牌動畫實現原理
- 用FileReader API實現本地預覽檔案
- 用Canvas生成海報
零零總總花了半天的時間，希望對自己後面涉及H5遊戲有所幫助，也希望大家通過這篇文章有所收穫。
設計思路
效果演示
具體實現
接下來我將貼出每一步的核心程式碼，供大家參考學習。
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程式碼後期會封裝成一個類，基本用法和思路大致如下：
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實現洗牌動畫和拼圖切換的動畫，洗牌演算法主要通過維護一個矩陣序列來實現。接下來是基本的工具方法：
// 滑動元素,用於切換頁面
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);
複製程式碼該遊戲的核心演算法已經交給大家了，如想體驗真實遊戲，歡迎交流哈，如果想研究遊戲原始碼，歡迎和我交流哈。
更多推薦
- 基於react/vue生態的前端整合解決方案探索與總結
- 9012教你如何使用gulp4開發專案腳手架
- 如何用不到200行程式碼寫一款屬於自己的js類庫)
- 讓你瞬間提高工作效率的常用js函式彙總(持續更新)
- 一張圖教你快速玩轉vue-cli3
- 3分鐘教你用原生js實現具有進度監聽的檔案上傳預覽元件
- 3分鐘教你用原生js實現具有進度監聽的檔案上傳預覽元件
- 使用Angular8和百度地圖api開發《旅遊清單》
- js基本搜尋演算法實現與170萬條資料下的效能測試
- 《前端演算法系列》如何讓前端程式碼速度提高60倍
- 《前端演算法系列》陣列去重
- vue高階進階系列——用typescript玩轉vue和vuex
- 前端三年，談談最值得讀的5本書籍
歡迎關注下方公眾號，獲取更多前端知識精粹和學習社群：
回覆學習路徑，將獲取筆者多年從業經驗的前端學習路徑的思維導圖。