微信小程序双人游戏横屏（微信小程序实现拼图游戏）

<!--index.wxml-->
<view class="container">
  <!-- 标题 -->
  <view class="title">游戏选关</view>

  <!-- 关卡列表 -->
  <view class="levelBox">
    <view class="box" wx:for="{{levels}}" wx:key="levels{{index}}" bindtap="chooseLevel" data-level="{{item}}">
      <image src="/images/{{item}}"></image>
      <text>第{{index+1}}关</text>
    </view>
  </view>

</view>

/**index.wxss**/
/* 关卡区域列表 */
.levelBox{
  width: 100%;
}

/* 单个关卡区域 */
.box{
  width: 50%;
  float: left;
  margin: 25rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 选关图片 */
image{
  width: 260rpx;
  height: 260rpx;
}

//index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    levels: [
      'pic01.jpg" alt="微信小程序双人游戏横屏（微信小程序实现拼图游戏）" border="0" />

<!--pages/game/game.wxml-->
<view class="container">
  <!-- 顶端提示图 -->
  <view class="title">提示图</view>
  <image src="{{url}}"></image>

  <!-- 游戏区域 -->
  <canvas canvas-id="myCanvas" bindtouchstart="touchBox"></canvas>

  <!-- 重新开始按钮 -->
  <button type="warn" bindtap="restartGame">重新开始</button>
</view>

/* pages/game/game.wxss */
/* 提示图 */
image{
  width: 250rpx;
  height: 250rpx;
}

/* 游戏画布区域 */
canvas{
  border: 1rpx solid;
  width: 300px;
  height: 300px;
}

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

// 方块的宽度
var w = 100

// 图片的初始地址
var url = '/images/pic01.jpg" alt="微信小程序双人游戏横屏（微信小程序实现拼图游戏）" border="0" />