建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
我去年曾寫(xiě)過(guò)一個(gè)用H5，Javascript，css3實(shí)現(xiàn)的拼拼樂(lè)小游戲，技術(shù)棧采用自己封裝的類(lèi)Jquery框架 Xuery ，其中涉及到了很多經(jīng)典的 javascript 算法和css3特性 ，對(duì)大家的編程能力會(huì)有很大的提高，文末我也會(huì)放上源碼獲取方式，大家可以學(xué)習(xí)體驗(yàn)一下。
前言
因?yàn)樵搼?yīng)用屬于 H5 游戲，為了讓項(xiàng)目更輕量，我沒(méi)有采用第三方 ui 庫(kù)，如果大家想采用基于 vue 的第三方移動(dòng)端ui庫(kù)，我給大家推薦幾個(gè)我之前用過(guò)的比較靠譜的：
- Mint 餓了么推出的移動(dòng)端ui庫(kù)
- NutUI 一套京東風(fēng)格的移動(dòng)端組件庫(kù)
- muse-ui 基于MaterialUI風(fēng)格的移動(dòng)端UI組件
- cube-ui 滴滴團(tuán)隊(duì)開(kāi)發(fā)的移動(dòng)端UI組件庫(kù)
- vant 有贊團(tuán)隊(duì)的電商風(fēng)格的移動(dòng)端組件庫(kù)
- atom-design atom風(fēng)格的移動(dòng)端ui組件庫(kù)
- mand-mobile 滴滴團(tuán)隊(duì)研發(fā)的基于金融場(chǎng)景的移動(dòng)端ui組件庫(kù)
以上推薦的都是社區(qū)比較完善，bug比較少的組件庫(kù)，大家可以感受一下。
回到我們的小游戲開(kāi)發(fā)，考驗(yàn)更多的是大家對(duì) javascript 和css3 的掌握程度，在學(xué)習(xí)完這篇文章之后相信大家對(duì) javascript 和 css3 的編程能力都會(huì)有極大的提升，后面還會(huì)介紹如何使用 canvas 實(shí)現(xiàn)生成戰(zhàn)績(jī)海報(bào)圖的功能。
正文
我們先來(lái)看看游戲的預(yù)覽界面：
本文的算法實(shí)現(xiàn)方式涉及到洗牌算法，動(dòng)態(tài)生成n維坐標(biāo)，圖片切割等，接下來(lái)會(huì)介紹核心算法的實(shí)現(xiàn)， 至于vue-cli的使用方法，筆者之前也寫(xiě)過(guò)對(duì)應(yīng)的文章，大家可以研究學(xué)習(xí)一下。vue-cli搭建項(xiàng)目方式如下：
- // 安裝
- yarn global add @vue/cli
- // 創(chuàng)建項(xiàng)目
- vue create pinpinle
- // 進(jìn)入項(xiàng)目并啟動(dòng)
- cd pinpinle && yarn start
關(guān)于vue-cli3配置實(shí)戰(zhàn)，可以移步 一張圖教你快速玩轉(zhuǎn)vue-cli3
H5游戲核心功能介紹
目前筆者主要整理樂(lè)如下核心功能，接下來(lái)筆者會(huì)一一帶大家實(shí)現(xiàn)：
- 實(shí)現(xiàn)純javascript上傳預(yù)覽圖片
- 實(shí)現(xiàn)拼圖分割功能
- 實(shí)現(xiàn)洗牌算法
- 實(shí)現(xiàn)生成戰(zhàn)績(jī)海報(bào)功能
1. 實(shí)現(xiàn)純javascript上傳預(yù)覽圖片
文件上傳預(yù)覽主要采用FileReader API實(shí)現(xiàn)，原理就是將file對(duì)象傳給FileReader的readAsDataURL然后轉(zhuǎn)化為data:URL格式的字符串(base64編碼)以表示所讀取文件的內(nèi)容。 具體代碼如下：
- // 2.文件上傳解析
- let 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. 實(shí)現(xiàn)拼圖分割功能
一般我們處理這種拼圖游戲都會(huì)有如下方案：
- 用canvas分割圖片
- 采用n張不同的切好的切片圖片(方法簡(jiǎn)單，但是會(huì)造成多次請(qǐng)求)
- 動(dòng)態(tài)背景分割
經(jīng)過(guò)權(quán)衡，筆者想出了第三種方法，也是自認(rèn)為比較優(yōu)雅的方法，即動(dòng)態(tài)背景分割，我們只需要使用1張圖片，然后利于css的方式切割圖片，有點(diǎn)經(jīng)典的雪碧圖的感覺(jué)，如下：
本質(zhì)就是我們?cè)O(shè)置九個(gè)div，每個(gè)div都使用同一張圖片，并且圖片大小等于游戲畫(huà)布大小，但是我們通過(guò)backgroundPosition(背景定位)的方式來(lái)實(shí)現(xiàn)切割圖片。這樣做的另一個(gè)好處是方便我們實(shí)現(xiàn)洗牌邏輯。
3. 實(shí)現(xiàn)洗牌算法
洗牌邏輯依托于隨機(jī)算法，這里我們結(jié)合坐標(biāo)系，實(shí)現(xiàn)一個(gè)隨機(jī)生成二維坐標(biāo)系的邏輯，然后通過(guò)改變每個(gè)切片的translate位置，配合過(guò)渡動(dòng)畫(huà)，即可實(shí)現(xiàn)洗牌功能和洗牌動(dòng)畫(huà)。
3.1 數(shù)組亂序算法
數(shù)組亂序比較簡(jiǎn)單，代碼如下：
- // 數(shù)組亂序
- function upsetArr(arr) {
- arr.sort(function(a,b){
- return Math.random() > 0.5 ? -1 : 1
- })
- }
3.2 洗牌邏輯
洗牌邏輯基于數(shù)組亂序，具體邏輯如下：
- // 洗牌方法
- 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'+ ')';
- }
- }
3.3 生成n緯矩陣坐標(biāo)
n維矩陣主要用來(lái)做洗牌和計(jì)算成功率的，具體實(shí)現(xiàn)如下：
- // 生成n維矩陣坐標(biāo)
- 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 置換算法
置換算法主要用來(lái)切換拼圖的，比如用戶(hù)想移動(dòng)拼圖，可以用過(guò)置換來(lái)實(shí)現(xiàn)：
- // 數(shù)組置換
- unction swap(arr, indexA, indexB) {
- let cache = arr[indexA];
- arr[indexA] = arr[indexB];
- arr[indexB] = cache;
4. 實(shí)現(xiàn)生成戰(zhàn)績(jī)海報(bào)功能
生成戰(zhàn)績(jī)海報(bào)筆者采用canvas來(lái)實(shí)現(xiàn)，對(duì)于canvas的api不熟悉的可以查看MDN，講的比較詳細(xì)。這里筆者簡(jiǎn)單實(shí)現(xiàn)一個(gè)供大家參考：
- 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,' + '快來(lái)挑戰(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)注下方二維碼開(kāi)始游戲', 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);
- // 生成預(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！')
- }
- }
H5拼圖小游戲筆者已在github開(kāi)源， 感興趣的可以學(xué)習(xí)參考。以上的邏輯部分的代碼可以直接整合到vue項(xiàng)目中即可，由于實(shí)現(xiàn)比較簡(jiǎn)單，這里筆者就不詳細(xì)介紹了。
本文轉(zhuǎn)載自微信公眾號(hào)「趣談前端」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系趣談前端公眾號(hào)。
新聞標(biāo)題：前端實(shí)戰(zhàn):從零到一實(shí)現(xiàn)H5拼圖小游戲
標(biāo)題鏈接：http://m.fisionsoft.com.cn/article/djseedg.html
