根据实验手册上的网址，下载项目需要用到的文件。然后进入微信开发者工具，创建一个新项目jigsawGame。
本项目有两个页面文件，需要在pages目录下创建index(首页页面)和game(游戏页面)。在根目录下的app.json中定义，如下图所示：
公共样式设计在app.wxss中编写代码，如下图所示：
index页面设计包含两部分内容：
顶端标题：
关卡列表：
pages/game/game.wxml和pages/game/game.wxss中代码分别如下：
game页面设计包含两部分内容：
整体容器和顶端标题：
提示图：
游戏画布：
重新开始按钮：
pages/game/game.wxml和pages/game/game.wxss中代码分别如下：
由于暂时没有做点击跳转的逻辑设计，所以可以在开发工具顶端选择“普通编译”下的“添加编译模式”,并携带临时测试参数level=pic01.jpg，如下图所示：
这样编译后只显示game页面：
在pages/index/index.js中进行首页的逻辑实现。
在Page中的data后设置页面的初始数据，在pages/index/index.js中使用for循换遍历列表。
自定义函数chooseLevel实现游戏选择关卡功能，在pages/index/index.js中使用bindtap进行函数绑定。
编译运行后index页面如下图所示：
在pages/game/game.js中进行游戏页面的逻辑实现。首先在game.js开头记录一些游戏初始数据信息，包括方块的初始位置、方块的宽度、图片的初始地址。
初始化拼图画面。考虑从空白方块的所在位置入手，每次随机让它和周围的邻近方块交换位置，这样可以通过方块反向移动回到最初始状态，确保本局有解，并且交换足够多的次数后，可以实现随机打乱的效果。在game.js中添加shuffle函数，随机打乱方块顺序。然后继续添加drawCanvas函数，用于将打乱后的图片方块绘制到画布上。最后在onLoad函数中调用自定义函数shuffle和drawCanvas。实现效果如下：
移动被点击的方块。在game.js文件添加自定义函数 touchBox，用于实现图片方块的移动。修改game.wxml页面中的画布组件
判断游戏成功。在game.js中的data里添加初始数据isWin，用于标记游戏成功与否。添加函数isWin用于判断游戏是否已经成功。然后修改touchBox函数，在被触发时追加对游戏是否成功的判断，如果游戏成功，不做任何操作。