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

“專業(yè)、務(wù)實、高效、創(chuàng)新、把客戶的事當(dā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ù)。我們始終堅持以客戶需求為導(dǎo)向，結(jié)合用戶體驗與視覺傳達(dá)，提供有針對性的項目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領(lǐng)市場！

思路步驟

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

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ī)則，初始化后不會進(jìn)行改變；row、column：對原圖進(jìn)行切割并繪制的規(guī)則；index：用來判定是否完成拼圖的規(guī)則之一，繪制空白塊的規(guī)則，其中空白塊的index=-1)
• num：隨機排列的次數(shù)。
• sign：空白塊在拼圖集合 pic 中的索引。 (數(shù)字類型，用來定位空白塊，跟隨空白塊的移動而變化，是進(jìn)行移動的規(guī)則之一；默認(rèn)為：15)
• isWin：用來判斷是否完成拼圖的條件。 (布爾類型，默認(rèn)為false)
• step:表示移動的有效步數(shù)。 (數(shù)字類型，默認(rèn)為0，重新游戲及完成游戲會清零)
• maskShow： 編輯游戲 的判定條件。 (布爾類型，用來顯示與隱藏編輯游戲的對話框，默認(rèn)為false)
  

方法分析

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

randomHandler() {
  // pic的初始化
  for(let i=0;i<this.row*this.column;i++) {
  // 設(shè)置切割后每個小圖片的位置
  let row = parseInt(i/this.row);
  let column = i - row*this.column;
  // 對在canvas的排列進(jìn)行初始化，后續(xù)不會進(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è)置最后一個元素為空白塊，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}
  }
}

分享題目：使用vue+canvas實現(xiàn)一個拼圖小游戲-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://chinadenli.net/article30/djghpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、品牌網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、App開發(fā)、網(wǎng)站營銷、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)