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

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

“專業(yè)、務實、高效、創(chuàng)新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。成都創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務商、專業(yè)的互聯(lián)網(wǎng)服務提供商! 專注于網(wǎng)站制作、成都網(wǎng)站制作、軟件開發(fā)、設(shè)計服務業(yè)務。我們始終堅持以客戶需求為導向，結(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<this.row*this.column;i++) {
  // 設(shè)置切割后每個小圖片的位置
  let row = parseInt(i/this.row);
  let column = i - row*this.column;
  // 對在canvas的排列進行初始化，后續(xù)不會進行改變
  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)
當前鏈接：http://muchs.cn/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)

猜你還喜歡下面的內(nèi)容