文章詳情頁

vue+canvas實現拼圖小游戲

瀏覽：5日期：2022-11-21 14:02:54

利用 vue+canvas 實現拼圖小游戲，供大家參考，具體內容如下

思路步驟

一個拼圖拼盤和一個原圖參照對原圖的切割以及隨機排序通過W/A/D/S或上下左右進行移動難度的自主選擇對拼圖是否完成的判定

JS實現部分

數據分析

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

方法分析

拼圖集合 pic 的初始化及隨機排列

randomHandler() { // pic的初始化 for(let i=0;i<this.row*this.column;i++) { // 設置切割后每個小圖片的位置 let row = parseInt(i/this.row); let column = i - row*this.column; // 對在canvas的排列進行初始化，后續不會進行改變 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}; // 設置最后一個元素為空白塊，index = -1 if(i == (this.row*this.column-1)) { this.pic[i] = {...this.pic[i],row:row,column:column,index:-1}; } } // 隨機排列 pic集合 for(let i=0;i<this.num;i++) { let ran1,ran2,temp={}; // 隨機獲取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} }}

拼圖的繪制 (根據得到的隨機 pic 集合進行繪制)

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); // 每個小拼圖的寬高，根據canvas的寬高和拼圖行數row列數column來動態設置 // 是進行難度動態設置的唯一方式 let width = canvas.width/this.column; let height = canvas.width/this.row; // 必須通過 Image 構造函數動態創建，若是通過獲取 DOM 節點，則onload只執行一次，無法進行移動 let img = new Image(); img.src = require(’../../public/image/test.png’); img.onload = () => { for(let i=0;i<this.row*this.column;i++) { // 繪制到canvas的各元素的起始坐標 let dx = this.pic[i].y * width; let dy = this.pic[i].x * height; // 對圖片進行切割的起始點坐標 let cx = this.pic[i].column * width; let cy = this.pic[i].row * height; // 參數：img圖片，切割的起始點坐標，切割的寬高，繪制的起始點坐標，繪制的寬高 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 構造函數動態創建

拼圖的移動

// 在 mounted 鉤子進行鍵盤的監聽事件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:空白塊根據方向最終需移動到的位置索引 let re,temp = {}; if(dir == ’up’ && this.pic[this.sign].x>0) { // 根據空白塊的row和column推算出上面一塊圖片的序號 // 在將兩個圖片快進行互換位置，及交換row、column、index // 重新賦值this.sign（標志著空白塊的序號：默認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; } // 重新繪制拼圖，也可以通過計算只重新繪制移動的部分區域 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) { // 顯示成功的狀態以及清空步數 this.isWin = true; this.step = 0; } }}

重新游戲

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

JS總合

HTML部分

CSS部分

最終的完成結果圖

vue+canvas實現拼圖小游戲

代碼地址：拼圖游戲

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。

Vue

上一條：vue修改Element的el-table樣式的4種方法下一條：vue使用screenfull插件實現全屏功能

相關文章：

1. 告別AJAX實現無刷新提交表單2. 小技巧處理div內容溢出3. Vue+elementUI下拉框自定義顏色選擇器方式4. css進階學習選擇符5. 詳解盒子端CSS動畫性能提升6. 使用css實現全兼容tooltip提示框7. ASP中常用的22個FSO文件操作函數整理8. CSS hack用法案例詳解9. CSS3實例分享之多重背景的實現(Multiple backgrounds)10. 低版本IE正常運行HTML5+CSS3網站的3種解決方案

排行榜

					
					一個 2 年 Android 開發者的 18 條忠告
MAC平臺基于Python Appium環境搭建過程圖解
python 實現倒計時功能(gui界面)
el-table表格動態合并相同數據單元格(可指定列+自定義合并)
使用Django實現把兩個模型類的數據聚合在一起
如何手寫簡易的 Vue Router
Django實現聊天機器人
如何用python實現一個HTTP連接池
關于Java JDK安裝、配置環境變量的問題
10個技巧，讓你在 2017 年成為更好的Node開發者
小技巧處理div內容溢出
				