// pintu.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

  },

  initGame: function () {

    this.setData({

      cards: {

        card1: { num: 3, hidden: false },

        card2: { num: 7, hidden: false },

        card3: { num: 5, hidden: false },

        card4: { num: '', hidden: true },

        card5: { num: 4, hidden: false },

        card6: { num: 6, hidden: false },

        card7: { num: 2, hidden: false },

        card8: { num: 8, hidden: false },

        card9: { num: 1, hidden: false }

      }

    });

  },

  card1: function () {

    this.moveCard('1', '2');

    this.moveCard('1', '4');

  },

  card2: function () {

    this.moveCard('2', '1');

    this.moveCard('2', '3');

    this.moveCard('2', '5');

  },

  card3: function () {

    this.moveCard('3', '2');

    this.moveCard('3', '6');

  },

  card4: function () {

    this.moveCard('4', '1');

    this.moveCard('4', '5');

    this.moveCard('4', '7');

  },

  card5: function () {

    this.moveCard('5', '2');

    this.moveCard('5', '4');

    this.moveCard('5', '6');

    this.moveCard('5', '8');

  },

  card6: function () {

    this.moveCard('6', '3');

    this.moveCard('6', '5');

    this.moveCard('6', '9');

  },

  card7: function () {

    this.moveCard('7', '4');

    this.moveCard('7', '8');

  },

  card8: function () {

    this.moveCard('8', '5');

    this.moveCard('8', '7');

    this.moveCard('8', '9');

  },

  card9: function () {

    this.moveCard('9', '6');

    this.moveCard('9', '8');

  },

  moveCard: function (n1, n2) {

    var cards = this.data.cards;

    var c1 = cards['card' + n1];

    var c2 = cards['card' + n2];

    if (c1.num && !c2.num) {

      var num1 = c1.num;

      var hidden1 = c1.hidden;

      var num2 = c2.num;

      var hidden2 = c2.hidden;

      cards['card' + n1].num = num2;

      cards['card' + n1].hidden = hidden2;

      cards['card' + n2].num = num1;

      cards['card' + n2].hidden = hidden1;

      var isGameOver = true;

      for (var i = 1; i < 9; i++) {

        if (cards['card' + i].num != i) {

          isGameOver = false;

          break;

        }

      }

      if (isGameOver) {

        cards.card9.num = 9;

        cards.card9.hidden = false;

      }

      this.setData({

        cards: cards

      });

      if (isGameOver) {

        wx.showModal({

          title: '恭喜',

          content: '你简直太厉害了',

          showCancel: false,

        })

      }

    }

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    this.initGame();

  }

})

{

  "navigationBarTitleText": "《拼图游戏》",

  "enablePullDownRefresh": false

}

<!--pintu.wxml-->

<view class="container">

  <view class="pintu-wrap">

    <view class="pintu-line">

      <view class="pintu-item-wrap">

        <button class="pintu-item" type="primary" hidden="{{cards.card1.hidden}}" bindtap="card1">{{cards.card1.num}}</button>

      </view>

      <view class="pintu-item-wrap">

        <button class="pintu-item" type="primary" hidden="{{cards.card2.hidden}}" bindtap="card2">{{cards.card2.num}}</button>

      </view>

      <view class="pintu-item-wrap">

        <button class="pintu-item" type="primary" hidden="{{cards.card3.hidden}}" bindtap="card3">{{cards.card3.num}}</button>

      </view>

    </view>

    <view class="pintu-line">

      <view class="pintu-item-wrap">

        <button class="pintu-item" type="primary" hidden="{{cards.card4.hidden}}" bindtap="card4">{{cards.card4.num}}</button>

      </view>

      <view class="pintu-item-wrap">

        <button class="pintu-item" type="primary" hidden="{{cards.card5.hidden}}" bindtap="card5">{{cards.card5.num}}</button>

      </view>

      <view class="pintu-item-wrap">

        <button class="pintu-item" type="primary" hidden="{{cards.card6.hidden}}" bindtap="card6">{{cards.card6.num}}</button>

      </view>

    </view>

    <view class="pintu-line">

      <view class="pintu-item-wrap">

        <button class="pintu-item" type="primary" hidden="{{cards.card7.hidden}}" bindtap="card7">{{cards.card7.num}}</button>

      </view>

      <view class="pintu-item-wrap">

        <button class="pintu-item" type="primary" hidden="{{cards.card8.hidden}}" bindtap="card8">{{cards.card8.num}}</button>

      </view>

      <view class="pintu-item-wrap">

        <button class="pintu-item" type="primary" hidden="{{cards.card9.hidden}}" bindtap="card9">{{cards.card9.num}}</button>

      </view>

    </view>

  </view>

  <view class="btn-wrap">

    <button type="warn" bindtap="initGame">重新开始</button>

  </view>

</view>

/* pintu.wxss */

.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

   padding: 20px 0 0;

  box-sizing: border-box;

  color: #4e4b4b;

}

.btn-wrap {

  width: 80%;

  padding: 20px 0;

  text-align: center;

  margin: auto;

}

.pintu-wrap {

  width: 90%;

  align-items: center;

}

.pintu-line {

  display: flex;

}

.pintu-item-wrap {

  height: 100px;

  width: 30%;

  margin: 5px;

}

.pintu-item {

  line-height: 100px;

  height: 100%;

  width: 100%;

}