WeChatアプレットがジグソーパズルゲームを実装

<!--index.wxml-->
<ビュークラス="コンテナ">
  <!-- タイトル -->
  <view class="title">ゲームレベルの選択</view>

  <!-- レベルリスト -->
  <view class="levelBox">
    <view class="box" wx:for="{{levels}}" wx:key="levels{{index}}" bindtap="chooseLevel" data-level="{{item}}">
      <画像 src="/images/{{item}}"></画像>
      <text>レベル {{index+1}}</text>
    </ビュー>
  </ビュー>

</ビュー>

/**index.wxss**/
/* レベルエリアリスト */
.レベルボックス{
  幅: 100%;
}

/* 単一レベルエリア */
。箱{
  幅: 50%;
  フロート: 左;
  マージン: 25rpx 0;
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
}

/*レベル選択画像*/
画像{
  幅: 260rpx;
  高さ: 260rpx;
}

//index.js
ページ（{

  /**
   * ページの初期データ */
  データ： {
    レベル: [
      'pic01.jpg',
      'pic02.jpg',
      'pic03.jpg',
      'pic04.jpg',
      'pic05.jpg',
      'pic06.jpg'
    ]

  },

  /**
   * カスタム機能 - ゲームレベルの選択 */
  レベルを選択: 関数(e) {
    // コンソールログ(e.currentTarget.dataset.level)
    // レベル選択画像を取得する let level = e.currentTarget.dataset.level

    // ゲームページにジャンプ wx.navigateTo({
      url: '../game/game?level='+level,
    })

  },
})

<!--pages/game/game.wxml-->
<ビュークラス="コンテナ">
  <!-- トップヒント画像 -->
  <view class="title">プロンプト画像</view>
  <画像 src="{{url}}"></画像>

  <!-- ゲームエリア -->
  <canvas canvas-id="myCanvas" bindtouchstart="touchBox"></canvas>

  <!-- 再起動ボタン -->
  <button type="warn" bindtap="restartGame">再起動</button>
</ビュー>

/* ページ/ゲーム/ゲーム.wxss */
/* プロンプト画像*/
画像{
  幅: 250rpx;
  高さ: 250rpx;
}

/* ゲームキャンバス領域 */
キャンバス{
  境界線: 1rpx 実線;
  幅: 300ピクセル;
  高さ: 300px;
}

// ページ/ゲーム/ゲーム.js
// ブロックの初期位置 var num = [
  ['00', '01', '02'],
  ['10', '11', '12'],
  ['20', '21', '22']
]

// ブロックの幅 var w = 100

// 画像の初期アドレス var url = '/images/pic01.jpg'

ページ（{

  /**
   * ページの初期データ */
  データ： {
    勝つかどうか: false

  },

  /**
   * カスタム関数 - ブロックの順序をランダムに乱す */
  シャッフル: 関数() {
    // まずすべてのブロックを初期位置に戻す num = [
      ['00', '01', '02'],
      ['10', '11', '12'],
      ['20', '21', '22']
    ]

    // 現在の空白のマス目の行と列を記録する var row = 2
    var 列 = 2

    // ブロックの順序を100回ランダムにシャッフルする for (var i = 0; i < 100; i++) {
      // 方向をランダムに生成: 上 0、下 1、左 2、右 3
      var direction = Math.round(Math.random() * 3)

      // 上: 0
      方向 == 0 の場合
        // 空白の四角形は一番上の行には置けません if (row != 0) {
          // 位置を入れ替える num[row][col] = num[row - 1][col]
          num[行 - 1][列] = '22'

          // 空白の正方形の行を更新します -= 1
        }
      }

      // 次へ: 1
      方向 == 1 の場合
        // 空白の四角形は一番下の行には置けません if (row != 2) {
          // 位置を入れ替える num[row][col] = num[row + 1][col]
          num[行 + 1][列] = '22'

          // 空白の正方形の行を更新 row += 1
        }
      }

      // 左: 2
      方向 == 2 の場合
        // 空白の四角形は左端の列には置けません if (col != 0) {
          // 位置を入れ替える num[row][col] = num[row][col - 1]
          num[行][列 - 1] = '22'

          // 空白の四角い列を更新 col -= 1
        }
      }

      // 右: 3
      方向 == 3 の場合
        // 空白の四角形は右端の列には置けません if (col != 2) {
          // 位置を入れ替える num[row][col] = num[row][col + 1]
          num[行][列 + 1] = '22'

          // 空白の四角い列を更新 col += 1
        }
      }

    }

  },

  /**
   * カスタム関数 - キャンバスのコンテンツを描画 */
  キャンバスを描画: 関数() {
    ctx = this.ctx とします。

    // キャンバスをクリアする ctx.clearRect(0, 0, 300, 300)

    // 3x3 パズルを描画するために、2 つの for ループ文を使用します for (var i = 0; i < 3; i++) {
      (var j = 0; j < 3; j++) の場合 {
        （数値[i][j] != '22'）の場合{
          // 行と列を取得します var row = parseInt(num[i][j] / 10)
          var 列 = num[i][j] % 10

          // 正方形を描画します ctx.drawImage(url, col * w, row * w, w, w, j * w, i * w, w, w)
        }
      }
    }

    ctx.draw()
  },

  /**
   * カスタム関数 - クリックブロックイベントをリッスンする*/
  タッチボックス: 関数(e) {
    // ゲームがすでに成功している場合は何もしない if (this.data.isWin) {
      //この関数を終了する return
    }

    // クリックされたブロックの x 座標と y 座標を取得します
    var x = e.changedTouches[0].x
    var y = e.changedTouches[0].y
    // コンソールログ('x:'+x+',y:'+y)

    // 行と列に変換 var row = parseInt(y / w)
    var col = parseInt(x / w)

    // クリックされた位置が空白でない場合 if (num[row][col] != '22') {
      // ボックスを移動してみます this.moveBox(row, col)

      // キャンバスコンテンツを再描画します this.drawCanvas()

      // ゲームが成功したかどうかを判定します if (this.isWin()) {
        // プロンプト文を画面に描画する let ctx = this.ctx

        // 完全な画像を描画する ctx.drawImage(url, 0, 0)

        // テキストを描画 ctx.setFillStyle('#e64340')
        ctx.setTextAlign('center')
        ctx.setFontSize(60)
        ctx.fillText('ゲーム成功', 150, 150)
        ctx.draw()
      }
    }
  },

  /**
   * カスタム関数 - クリックしたブロックを移動する */
  移動ボックス: 関数(i, j) {
    // ケース1: クリックしたブロックが最上部にない場合は、上に移動できるかどうかを確認します if (i > 0) {
      // ブロックの先頭が空白の場合 if (num[i - 1][j] == '22') {
        // 現在クリックされているブロックを空白の位置と入れ替える num[i - 1][j] = num[i][j]
        数値[i][j] = '22'
        戻る
      }
    }

    // ケース2: クリックしたブロックが下部にない場合は、下に移動できるかどうかを確認します if (i < 2) {
      // ブロックの下の領域が空の場合 if (num[i + 1][j] == '22') {
        // 現在クリックされているブロックを空白の位置と入れ替える num[i + 1][j] = num[i][j]
        数値[i][j] = '22'
        戻る
      }
    }

    // ケース3: クリックしたブロックが左端にない場合は、左に移動できるかどうかを確認します if (j > 0) {
      // 正方形の左側が空白の場合 if (num[i][j - 1] == '22') {
        // 現在クリックされているブロックを空白の位置と入れ替える num[i][j - 1] = num[i][j]
        数値[i][j] = '22'
        戻る
      }
    }

    // ケース4: クリックしたブロックが右端にない場合は、右に移動できるかどうかを確認します if (j < 2) {
      // 正方形の右側が空白の場合 if (num[i][j + 1] == '22') {
        // 現在クリックされているブロックを空白の位置と入れ替える num[i][j + 1] = num[i][j]
        数値[i][j] = '22'
        戻る
      }
    }
  },

  /**
   * カスタム関数 - ゲームが成功したかどうかを判定する */
  isWin: 関数() {
    // 配列全体をチェックするために二重の for ループを使用します for (var i = 0; i < 3; i++) {
      (var j = 0; j < 3; j++) の場合 {
        // ブロックが間違った位置にある場合 if (num[i][j] != i * 10 + j) {
          // false を返します。ゲームはまだ成功していません。false を返します。
        }
      }
    }

    // ゲーム成功、ステータスを更新 this.setData({
      勝つかどうか: true
    })
    // true を返すとゲームは成功します。true を返します。
  },

  /**
   * カスタム関数 - ゲームを再起動する */
  ゲームの再起動: 関数() {
    // ゲームステータスを更新する this.setData({
      勝つかどうか: false
    })

    // ブロックの順序をシャッフルする this.shuffle()

    // キャンバスの内容を描画します this.drawCanvas()
  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数(オプション) {
    // コンソール.log(オプション.レベル)

    // 画像パスアドレスを更新 url = '/images/' + options.level
    // プロンプト画像のアドレスを更新します this.setData({
      URL: URL
    })

    // キャンバスコンテキストを作成する this.ctx = wx.createCanvasContext("myCanvas")

    // ブロックの順序をシャッフルする this.shuffle()

    // キャンバスの内容を描画します this.drawCanvas()
  },

  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数() {

  },

  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {

  },

  /**
   * ライフサイクル機能 - ページの非表示を監視する*/
  onHide: 関数() {

  },

  /**
   * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数() {

  },

  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数() {

  },

  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数() {

  },

  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数() {

  }
})