微信小程序：拼圖遊戲

源代碼：https://github.com/lcp1551/lcpISfat

遊戲界面

初始化遊戲：

遊戲成功：

思路&功能：

1.初始化，將數字1~8存放在數組中，隨機打亂後拼接一個9(空白格),修改空白格的樣式

2.點擊數字，判斷空白格對於其所在位置的方向，進行相應的上下左右移動

3.上下左右移動，及把移動的兩個數字互換在數組中的位置

4.判斷數組中元素是不是[1,2,3,4,5,6,7,8,9]，是則遊戲成功，

5.計時，利用定時器，結束，清除定時器

代碼：

項目中所用到的數據：

data: {    
    num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'],   //初始化前    
    hidden: true,   //隱藏空白格中的數字    
    time:0,           //秒數    
    t:''                  //定時器  
},複製代碼

構建頁面：index.wxml

<view class="container">
  <view class="row" wx:for="{{num}}" wx:for-item="item" wx:for-index="index">
    <button class="btn {{item == 9?'active':''}}" catchtap='onMoveTap'  data-item="{{item}}" data-index="{{index}}">{{item}}</button>
  </view>
</view>複製代碼

須要傳兩個數據過去，一個是被點擊塊的下標index和塊中的數字item

動態爲空白格[9]添加樣式active

{{item == 9?'active':''}}複製代碼

遊戲初始化：

init:function(){
    this.setData({
      num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])
    })
  },複製代碼

初始化的時候，這裏用了sortArr(arr)打亂數組，並拼接個空白格[9]，這樣讓空白格初始化的時候永遠處於最後一位。

隨機打亂數組:

sortArr: function (arr) {
    return arr.sort(function () {
      return Math.random() - 0.5
    })
  }複製代碼

這裏用了最簡單的打亂方法，缺點就是打亂不徹底

給每一個塊添加點擊事件onMoveTap:

onMoveTap: function (e) {
    var index = e.currentTarget.dataset.index;
    var item = e.currentTarget.dataset.item;
    if (this.data.num[index + 3] == 9) {
      this.down(e);
    }    
    if (this.data.num[index - 3] == 9) {
      this.up(e);    
    }    
    if (this.data.num[index + 1] == 9 && index != 2 && index != 5) {      
      this.right(e); 
    }
    if (this.data.num[index - 1] == 9 && index != 3 & index != 6) { 
      this.left(e);
    }  }複製代碼

若是空白格的下標比所點擊的塊的下表大3，則表示空白格在所點擊塊的下方，那麼點擊後向下移動；

若是空白格的下標比所點擊的塊的下表小3，則表示空白格在所點擊塊的上方，那麼點擊後向上移動；

若是空白格的下標比所點擊的塊的下表大1，則表示空白格在所點擊塊的右方，那麼點擊後向右移動，需考慮點擊快是否在容器右邊緣；

若是空白格的下標比所點擊的塊的下表小1，則表示空白格在所點擊塊的左方，那麼點擊後向左移動，需考慮點擊快是否在容器左邊緣；

移動：

以向上移動舉例

up: function (e) {
    var index = e.currentTarget.dataset.index; //當前數字下標
    var temp = this.data.num[index];
    this.data.num[index] = this.data.num[index - 3]
    this.data.num[index - 3] = temp;
    this.setData({
      num: this.data.num
    })    
    if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
      this.success();
    }
  }複製代碼

移動後，將所點擊塊與空白格互換在數組中的位置，並判斷目前的數組是否知足遊戲成功的條件，判斷數組相等，我這裏把數組轉化成字符串作的比較

遊戲成功：

success: function () {
    var that = this;
    wx.showToast({
      title: '闖關成功',
      icon: 'success',
      success: function () {
        that.init();
      }
    })
  }複製代碼

遊戲成功，彈出交互反饋窗口，並初始化從新打亂數組

定時器：

timeCount:function(){
    var that = this;
    var timer = that.data.time;
    that.setData({
      t:setInterval(function(){
        timer++;
        that.setData({ 
         time:timer
       })
      },1000)
    })
  }複製代碼

開始結束遊戲：

timeBegin:function(){
    clearInterval(this.data.t);
    this.setData({
      time:0
    })
    this.timeCount();
    this.init();
  },
  timeStop:function(){
    clearInterval(this.data.t);
    if (this.data.num.toString() != [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
      this.fail();
    }
  }複製代碼

給開始按鈕綁定timeBegin事件，初始化遊戲

給結束按鈕綁定timeStop事件，判斷是否遊戲成功

試玩:

源代碼：github.com/lcp1551/lcp…

待開發：

選擇難度

自傳圖片