設計思路

1、將一張海報等分成 N*N 的矩陣

方法一：利用兩個元件迴圈完成，view元件和image元件，view元件作為盒子規定大小—-超出部分不顯示，image元件展示完整的海報—-進行定位。迴圈該組合拼接成一張完整的海報。
方法二：利用一個元件迴圈完成，view元件配合背景圖，單純的迴圈定位view元件，就能完成海報。

優點：方法一可以將大多數公用的WXSS提出到WXSS檔案中，WXML程式碼比較清晰；方法二元件少一個，結構比較清晰。
缺點：方法一元件多，定位多，容易混亂；方法二背景必須在view元件上設定，程式碼冗餘。

本文采用方法二實現。

2、圖片位置的處理

1、 建立海報正確時的view定位和背景定位陣列typeArr；
2、 建立打亂陣列順序的view定位和背景定位陣列newTypeArr；
3、 對newTypeArr進行迴圈展示，在頁面形成錯亂的海報。

3、 打亂順序的處理

1、建立一個矩陣個數（N*N）長度的一維陣列（[0,…,N*N-1]）;
方法一：用sort方法傳入函式 ()=>{return Math.random() - 0.5;}
方法二：迴圈每次隨機一個位置，將當前位置的數和隨機位置的數進行互換

function randomArr(){
  let len = this
 
.pointsArr.length;
  for(let i = 0; i < len; i++){
    let index = parseInt(Math.random() * len);
    let current = this.pointsArr[i];
    this.pointsArr[i] = this.pointsArr[index];
    this.pointsArr[index] = current;
  }
}

方法三：再新建一個空陣列，迴圈矩陣陣列，每次隨機一個0 ~ N*N-1的數，儲存到空陣列，如果隨機數在空陣列存在，則此次迴圈重來，如果隨機數在空陣列不存在，則儲存到空陣列。

本文采用方法二處理。

4、觸發拖拽和圖片切換的處理

1. 直接全域性單獨建立以view元件（拖拽view），預設隱藏，初始定位（0，0）背景（0，0）；
2. touchstart的處理，獲取觸點的當前位置—通過觸點獲取該位置view元件的定位座標（x，y）背景座標（px，py），同時記錄當前觸點的座標（cx，cy）；
3. 將獲取的定位座標（x，y）背景座標（px，py）賦值給拖拽view；
4. touchmove的處理，記錄當前移動點的座標（cgx，cgy），通過座標（cx，cy）和（cgx，cgy）計算出發生的位移（sx，sy），對拖拽view的定位座標進行相同的位移（sx，sy）處理；
5. touchend的處理，拖拽view隱藏還原，將end時矩陣觸點view和start時的矩陣觸點view的背景座標（px，py）進行交換，完成兩個位置的圖片切換。

5、是否完成拼圖的判斷

將正確順序陣列typeArr和錯亂陣列newTypeArr進行JSON.stringify()轉化比較，如果相同，則完成拼圖，否則未完成拼圖。

6、是否繼續增加遊戲難度

如果增加遊戲難度，type值加一，init初始化遊戲，否則返回首頁。

注意

1. 此處的拖拽功能採用的定位模擬，而不是HTML5原生的拖拽功能。
2. 採用的是拖拽切換拼圖，而不是空位移動拼圖，此種方式簡單很多。
3. 每次拖拽完成後所有的記錄資料要清除還原。

下載

遊戲列表