// 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%;
}