|
微信小程序：拼圖游戲
源代碼：https://github.com/lcp1551/lcpISfat
游戲界面
初始化游戲：
游戲成功：
思路&功能：
1.初始化，將數(shù)字1~8存放在數(shù)組中，隨機(jī)打亂后拼接一個(gè)9(空白格),修改空白格的樣式
2.點(diǎn)擊數(shù)字，判斷空白格對(duì)于其所在位置的方向，進(jìn)行相應(yīng)的上下左右移動(dòng)
3.上下左右移動(dòng)，及把移動(dòng)的兩個(gè)數(shù)字互換在數(shù)組中的位置
4.判斷數(shù)組中元素是否是[1,2,3,4,5,6,7,8,9]，是則游戲成功，
5.計(jì)時(shí)，利用定時(shí)器，結(jié)束，清除定時(shí)器
代碼：
項(xiàng)目中所用到的數(shù)據(jù)：
-
data: {
num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'], //初始化前
hidden: true, //隱藏空白格中的數(shù)字
time:0, //秒數(shù)
t:'' //定時(shí)器
}
|
構(gòu)建頁(yè)面：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>
|
需要傳兩個(gè)數(shù)據(jù)過(guò)去，一個(gè)是被點(diǎn)擊塊的下標(biāo)index和塊中的數(shù)字item
動(dòng)態(tài)為空白格[9]添加樣式active
-
{{item == 9?'active':''}}復(fù)制代碼
游戲初始化：
-
init:function(){
this.setData({
num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])
})
}
|
初始化的時(shí)候，這里用了sortArr(arr)打亂數(shù)組，并拼接個(gè)空白格[9]，這樣讓空白格初始化的時(shí)候永遠(yuǎn)處于最后一位。
隨機(jī)打亂數(shù)組:
-
sortArr: function (arr) {
return arr.sort(function () {
return Math.random() - 0.5
})
}
|
這里用了最簡(jiǎn)單的打亂方法，缺點(diǎn)就是打亂不完全
給每個(gè)塊添加點(diǎn)擊事件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);
}
|
如果空白格的下標(biāo)比所點(diǎn)擊的塊的下表大3，則表示空白格在所點(diǎn)擊塊的下方，那么點(diǎn)擊后向下移動(dòng)；
如果空白格的下標(biāo)比所點(diǎn)擊的塊的下表小3，則表示空白格在所點(diǎn)擊塊的上方，那么點(diǎn)擊后向上移動(dòng)；
如果空白格的下標(biāo)比所點(diǎn)擊的塊的下表大1，則表示空白格在所點(diǎn)擊塊的右方，那么點(diǎn)擊后向右移動(dòng)，需考慮點(diǎn)擊快是否在容器右邊緣；
如果空白格的下標(biāo)比所點(diǎn)擊的塊的下表小1，則表示空白格在所點(diǎn)擊塊的左方，那么點(diǎn)擊后向左移動(dòng)，需考慮點(diǎn)擊快是否在容器左邊緣；
移動(dòng)：
以向上移動(dòng)舉例
-
up: function (e) {
var index = e.currentTarget.dataset.index; //當(dāng)前數(shù)字下標(biāo)
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();
}
}
|
移動(dòng)后，將所點(diǎn)擊塊與空白格互換在數(shù)組中的位置，并判斷目前的數(shù)組是否滿(mǎn)足游戲成功的條件，判斷數(shù)組相等，我這里把數(shù)組轉(zhuǎn)化成字符串做的比較
游戲成功：
-
success: function () {
var that = this;
wx.showToast({
title: '闖關(guān)成功',
icon: 'success',
success: function () {
that.init();
}
})
}
|
游戲成功，彈出交互反饋窗口，并初始化重新打亂數(shù)組
定時(shí)器：
-
timeCount:function(){
var that = this;
var timer = that.data.time;
that.setData({
t:setInterval(function(){
timer++;
that.setData({
time:timer
})
},1000)
})
}
|
開(kāi)始結(jié)束游戲：
-
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();
}
}
|
給開(kāi)始按鈕綁定timeBegin事件，初始化游戲
給結(jié)束按鈕綁定timeStop事件，判斷是否游戲成功
|
