微信小游戏入门案例——拼图游戏

微信小游戏入门案例——拼图游戏

涉及内容:canvas组件、小程序界面绘图API

目录结构：

 

pages\game\game.js

// pages/game/game.js
// 方块的初始位置
var num = [
  ['00', '01', '02'],
  ['10', '11', '12'],
  ['20', '21', '22']
]

// 方块的宽度
var w = 100

// 图片的初始地址
var url = '/images/pic01.jpg'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isWin: false

  },

  /**
   * 自定义函数--随机打乱方块顺序
   */
  shuffle: function() {
    // 先令所有方块回归初始位置
    num = [
      ['00', '01', '02'],
      ['10', '11', '12'],
      ['20', '21', '22']
    ]

    // 记录当前空白方块的行和列
    var row = 2
    var col = 2

    // 随机打乱方块顺序100次
    for (var i = 0; i < 100; i++) {
      // 随机生成一个方向：上0,下1,左2,右3
      var direction = Math.round(Math.random() * 3)

      // 上：0
      if (direction == 0) {
        // 空白方块不能在最上面一行
        if (row != 0) {
          // 交换位置
          num[row][col] = num[row - 1][col]
          num[row - 1][col] = '22'

          // 更新空白方块的行
          row -= 1
        }
      }

      // 下：1
      if (direction == 1) {
        // 空白方块不能在最下面一行
        if (row != 2) {
          // 交换位置
          num[row][col] = num[row + 1][col]
          num[row + 1][col] = '22'

          // 更新空白方块的行
          row += 1
        }
      }

      // 左：2
      if (direction == 2) {
        // 空白方块不能在最左边一列
        if (col != 0) {
          // 交换位置
          num[row][col] = num[row][col - 1]
          num[row][col - 1] = '22'

          // 更新空白方块的列
          col -= 1
        }
      }

      // 右：3
      if (direction == 3) {
        // 空白方块不能在最右边一列
        if (col != 2) {
          // 交换位置
          num[row][col] = num[row][col + 1]
          num[row][col + 1] = '22'

          // 更新空白方块的列
          col += 1