這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)使用vue+canvas實現(xiàn)一個拼圖小游戲，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

“專業(yè)、務(wù)實、高效、創(chuàng)新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站制作、成都網(wǎng)站制作、軟件開發(fā)、設(shè)計服務(wù)業(yè)務(wù)。我們始終堅持以客戶需求為導向，結(jié)合用戶體驗與視覺傳達，提供有針對性的項目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領(lǐng)市場！

思路步驟

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

JS實現(xiàn)部分

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

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

方法分析

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

randomHandler() {
  // pic的初始化
  for(let i=0;i            

            當前名稱：使用vue+canvas實現(xiàn)一個拼圖小游戲-創(chuàng)新互聯(lián)            

            轉(zhuǎn)載注明：http://weahome.cn/article/djghpo.html