利用 vue+canvas 實(shí)現(xiàn)拼圖小游戲，供大家參考，具體內(nèi)容如下

思路步驟

一個(gè)拼圖拼盤和一個(gè)原圖參照 對(duì)原圖的切割以及隨機(jī)排序 通過W/A/D/S或上下左右進(jìn)行移動(dòng) 難度的自主選擇 對(duì)拼圖是否完成的判定

JS實(shí)現(xiàn)部分

數(shù)據(jù)分析

row：拼圖的總行數(shù)；column：拼圖的總列數(shù)。 (用來設(shè)置拼圖難度，也是每個(gè)拼圖塊寬高的設(shè)置規(guī)則) pic[{x,y,row,column,index}]：小拼圖的集合，其內(nèi)元素為小拼圖的數(shù)據(jù)結(jié)構(gòu)。 (x、y：拼圖塊在canvas的繪制規(guī)則，初始化后不會(huì)進(jìn)行改變；row、column：對(duì)原圖進(jìn)行切割并繪制的規(guī)則；index：用來判定是否完成拼圖的規(guī)則之一，繪制空白塊的規(guī)則，其中空白塊的index=-1) num：隨機(jī)排列的次數(shù)。 sign：空白塊在拼圖集合 pic 中的索引。 (數(shù)字類型，用來定位空白塊，跟隨空白塊的移動(dòng)而變化，是進(jìn)行移動(dòng)的規(guī)則之一；默認(rèn)為：15) isWin：用來判斷是否完成拼圖的條件。 (布爾類型，默認(rèn)為false) step:表示移動(dòng)的有效步數(shù)。 (數(shù)字類型，默認(rèn)為0，重新游戲及完成游戲會(huì)清零) maskShow： 編輯游戲 的判定條件。 (布爾類型，用來顯示與隱藏編輯游戲的對(duì)話框，默認(rèn)為false)

方法分析

拼圖集合 pic 的初始化及隨機(jī)排列

randomHandler() { // pic的初始化 for(let i=0;i<this.row*this.column;i++) { // 設(shè)置切割后每個(gè)小圖片的位置 let row = parseInt(i/this.row); let column = i - row*this.column; // 對(duì)在canvas的排列進(jìn)行初始化，后續(xù)不會(huì)進(jìn)行改變 let x = parseInt(i/this.row); let y = i - x*this.column; this.pic[i] = {...this.pic[i],x:x,y:y,row:row,column:column,index:i}; // 設(shè)置最后一個(gè)元素為空白塊，index = -1 if(i == (this.row*this.column-1)) { this.pic[i] = {...this.pic[i],row:row,column:column,index:-1}; } } // 隨機(jī)排列 pic集合 for(let i=0;i<this.num;i++) { let ran1,ran2,temp={}; // 隨機(jī)獲取0-14 ran1 = parseInt((this.row*this.column-1)*Math.random()) ran2 = parseInt((this.row*this.column-1)*Math.random()) temp.row = this.pic[ran1].row temp.column = this.pic[ran1].column this.pic[ran1] = {...this.pic[ran1],row:this.pic[ran2].row,column:this.pic[ran2].column} this.pic[ran2] = {...this.pic[ran2],...temp} }}

拼圖的繪制 (根據(jù)得到的隨機(jī) pic 集合進(jìn)行繪制)

drawHandler() { // 獲取 canvas DOM元素 let canvas = this.$refs.can; let ctx = canvas.getContext(’2d’); canvas.width = 400; canvas.height = 400; ctx.clearRect(0,0,400,400); // 每個(gè)小拼圖的寬高，根據(jù)canvas的寬高和拼圖行數(shù)row列數(shù)column來動(dòng)態(tài)設(shè)置 // 是進(jìn)行難度動(dòng)態(tài)設(shè)置的唯一方式 let width = canvas.width/this.column; let height = canvas.width/this.row; // 必須通過 Image 構(gòu)造函數(shù)動(dòng)態(tài)創(chuàng)建，若是通過獲取 DOM 節(jié)點(diǎn)，則onload只執(zhí)行一次，無法進(jìn)行移動(dòng) let img = new Image(); img.src = require(’../../public/image/test.png’); img.onload = () => { for(let i=0;i<this.row*this.column;i++) { // 繪制到canvas的各元素的起始坐標(biāo) let dx = this.pic[i].y * width; let dy = this.pic[i].x * height; // 對(duì)圖片進(jìn)行切割的起始點(diǎn)坐標(biāo) let cx = this.pic[i].column * width; let cy = this.pic[i].row * height; // 參數(shù)：img圖片，切割的起始點(diǎn)坐標(biāo)，切割的寬高，繪制的起始點(diǎn)坐標(biāo)，繪制的寬高 ctx.drawImage(img,cx,cy,width,height,dx,dy,width,height); if(this.pic[i].index == -1) { this.sign = i; ctx.clearRect(dx,dy,width,height); } } }}

其中 img 必須通過 Image 構(gòu)造函數(shù)動(dòng)態(tài)創(chuàng)建

拼圖的移動(dòng)

// 在 mounted 鉤子進(jìn)行鍵盤的監(jiān)聽事件mounted() { this.newGame(); document.onkeydown = (event) => { let key = event.keyCode; if(key==38 || key==87) this.moveHandler(’up’); else if (key==40 || key==83 ) this.moveHandler(’down’); else if (key==37 || key==65 ) this.moveHandler(’left’); else if (key==39 || key==68 ) this.moveHandler(’right’); } }methods: { moveHandler(dir) { // re:空白塊根據(jù)方向最終需移動(dòng)到的位置索引 let re,temp = {}; if(dir == ’up’ && this.pic[this.sign].x>0) { // 根據(jù)空白塊的row和column推算出上面一塊圖片的序號(hào) // 在將兩個(gè)圖片快進(jìn)行互換位置，及交換row、column、index // 重新賦值this.sign（標(biāo)志著空白塊的序號(hào)：默認(rèn)15） re = (this.pic[this.sign].x-1) * this.row + this.pic[this.sign].y; temp.row = this.pic[re].row; temp.column = this.pic[re].column; temp.index = this.pic[re].index; this.pic[re] = {...this.pic[re],row:this.pic[this.sign].row,column:this.pic[this.sign].column,index:this.pic[this.sign].index}; this.pic[this.sign] = {...this.pic[this.sign],...temp}; this.step = this.step + 1; } else if(dir == ’down’ && this.pic[this.sign].x<this.row-1) { re = (this.pic[this.sign].x+1) * this.row + this.pic[this.sign].y; temp.row = this.pic[re].row; temp.column = this.pic[re].column; temp.index = this.pic[re].index; this.pic[re] = {...this.pic[re],row:this.pic[this.sign].row,column:this.pic[this.sign].column,index:this.pic[this.sign].index}; this.pic[this.sign] = {...this.pic[this.sign],...temp}; this.step = this.step + 1; } else if(dir == ’left’ && this.pic[this.sign].y>0) { re = (this.pic[this.sign].x) * this.row + this.pic[this.sign].y-1; temp.row = this.pic[re].row; temp.column = this.pic[re].column; temp.index = this.pic[re].index; this.pic[re] = {...this.pic[re],row:this.pic[this.sign].row,column:this.pic[this.sign].column,index:this.pic[this.sign].index}; this.pic[this.sign] = {...this.pic[this.sign],...temp}; this.step = this.step + 1; } else if(dir == ’right’ && this.pic[this.sign].y<this.column-1) { re = (this.pic[this.sign].x) * this.row + this.pic[this.sign].y+1; temp.row = this.pic[re].row; temp.column = this.pic[re].column; temp.index = this.pic[re].index; this.pic[re] = {...this.pic[re],row:this.pic[this.sign].row,column:this.pic[this.sign].column,index:this.pic[this.sign].index}; this.pic[this.sign] = {...this.pic[this.sign],...temp}; this.step = this.step + 1; } // 重新繪制拼圖，也可以通過計(jì)算只重新繪制移動(dòng)的部分區(qū)域 this.drawHandler(); }}

完成拼圖的判定

isWinHandler() { // 通過比較所有元素的x、y和row、column是否相等即可，也可以通過index來判斷 for(let i=0;i<this.row*this.column;i++) { if(this.pic[i].x == this.pic[i].row && this.pic[i].y == this.pic[i].column) { // 顯示成功的狀態(tài)以及清空步數(shù) this.isWin = true; this.step = 0; } }}

重新游戲

newGame() { // 在 mounted 鉤子進(jìn)行 // 隱藏完成狀態(tài)，清空步數(shù)，獲取隨機(jī)排列，繪制拼圖模塊 this.isWin = false; this.step = 0; this.randomHandler(); this.drawHandler(); }

JS總合

<script>export default { data() { return { // row:拼圖的總行數(shù)，column:拼圖的總列數(shù) row:2, column:2, // 隨機(jī)打亂的次數(shù) num:100, // pic:拼圖的所有子集和； // 元素：index：子圖片的位置編號(hào) // row/column:對(duì)原圖分割后的橫縱編號(hào) // x/y:在canvas中的坐標(biāo)位置（不會(huì)改變） pic:[{x:0,y:0,row:0,column:0,index:0}], sign:15, isWin: false, step:0, maskShow:false } }, mounted() { 代碼在拼圖移動(dòng)模塊中 }, methods: { // 判斷是否完成拼圖 isWinHandler() { ... }, // 移動(dòng)的函數(shù)方法 moveHandler(dir) { ... }, // 繪制拼圖 drawHandler() { ... }, // 獲取隨機(jī)排序 randomHandler() { ... }, newGame() { ... }}</script>

HTML部分

<template> <div class='index'> <div class='contain'> <canvas ref='can'></canvas> <!-- 完成拼圖的狀態(tài)顯示 --> <div v-if='isWin' class='win'>游戲勝利！</div> <div class='btns'> <span @click='newGame'>重新游戲</span> <span @click='maskShow = true'>編輯游戲</span> <span @click='isWinHandler'>檢驗(yàn)</span> <span>{{step}}</span> </div> <!-- 點(diǎn)擊編輯游戲的彈出框 --> <div v-show='maskShow' class='mask'> 行：<input type='text' v-model='row' placeholder='請(qǐng)輸入行數(shù)'> 列：<input type='text' v-model='column' placeholder='請(qǐng)輸入列數(shù)'> <button @click='maskShow = false'>完成</button> </div> </div> <img ref='img' src='http://m.b3g6.com/public/image/test.png' alt='error'> </div></template>

CSS部分

<style scoped>/* 編輯的彈出框 */.mask { width: 200px; height: 200px; background-color: rosybrown; position: absolute; left: 510px; top: 0;}/* 按鈕樣式 */.btns > span { display: inline-block; width: 80px; font-size: 12px; height: 24px; text-align: center; line-height: 24px; margin-bottom: 5px; background-color: thistle; cursor: pointer;}/* 右側(cè)按鈕區(qū) */.btns { width: 80px; height: 400px; border: 1px solid tan; border-radius: 5px; background-origin: border-box; padding: 5px; position: absolute; left: 412px; top: 0;}/* 完成拼圖的狀態(tài) */.win { width: 402px; height: 402px; line-height: 402px; text-align: center; font: 24px; opacity: 0.5; background-color: paleturquoise; position: absolute; top: 0; left: 0;}.img { display: inline-block;}/* canvas */.can { border: 1px solid teal;}/* canvas容器 */.contain { position: relative;}</style>

最終的完成結(jié)果圖

代碼地址：拼圖游戲

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。