小程序模板網(wǎng)

微信小程序:拼圖游戲

發(fā)布時間:2018-08-29 09:17 所屬欄目:小程序開發(fā)教程

微信小程序:拼圖游戲

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

 

游戲界面

初始化游戲:

游戲成功:

 

思路&功能:

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

2.點擊數(shù)字,判斷空白格對于其所在位置的方向,進行相應的上下左右移動

3.上下左右移動,及把移動的兩個數(shù)字互換在數(shù)組中的位置

4.判斷數(shù)組中元素是否是[1,2,3,4,5,6,7,8,9],是則游戲成功,

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

 

代碼:

項目中所用到的數(shù)據(jù):

 

				
  1. data: {
    num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'], //初始化前
    hidden: true, //隱藏空白格中的數(shù)字
    time:0, //秒數(shù)
    t:'' //定時器
    }

構建頁面:index.wxml

 

				
  1. <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>

需要傳兩個數(shù)據(jù)過去,一個是被點擊塊的下標index和塊中的數(shù)字item

動態(tài)為空白格[9]添加樣式active

 

				
  1. {{item == 9?'active':''}}復制代碼

游戲初始化:

 

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

初始化的時候,這里用了sortArr(arr)打亂數(shù)組,并拼接個空白格[9],這樣讓空白格初始化的時候永遠處于最后一位。

隨機打亂數(shù)組:

 

				
  1. sortArr: function (arr) {
    return arr.sort(function () {
    return Math.random() - 0.5
    })
    }

這里用了最簡單的打亂方法,缺點就是打亂不完全

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

 

				
  1. 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,則表示空白格在所點擊塊的左方,那么點擊后向左移動,需考慮點擊快是否在容器左邊緣;

 

移動:

以向上移動舉例

 

				
  1. up: function (e) {
    var index = e.currentTarget.dataset.index; //當前數(shù)字下標
    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();
    }
    }

移動后,將所點擊塊與空白格互換在數(shù)組中的位置,并判斷目前的數(shù)組是否滿足游戲成功的條件,判斷數(shù)組相等,我這里把數(shù)組轉化成字符串做的比較

 

游戲成功:

 

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

游戲成功,彈出交互反饋窗口,并初始化重新打亂數(shù)組

 

定時器:

 

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

開始結束游戲:

 

				
  1. 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事件,判斷是否游戲成功

 

 

 

 



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24745.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢