原始碼：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事件，判斷是否遊戲成功
試玩:
待開發：
選擇難度
自傳圖片