实验4：拼图游戏

一、实验目标

综合应用所学知识创建完整的拼图游戏项目；
熟练掌握<canvas>组件。

二、实验步骤

根据实验手册上的网址，下载项目需要用到的文件。然后进入微信开发者工具，创建一个新项目jigsawGame。
本项目有两个页面文件，需要在pages目录下创建index(首页页面)和game(游戏页面)。在根目录下的app.json中定义，如下图所示：
公共样式设计在app.wxss中编写代码，如下图所示：
index页面设计包含两部分内容：
- 顶端标题：<view>容器
- 关卡列表：<view>容器，内部使用数组循环
pages/game/game.wxml和pages/game/game.wxss中代码分别如下：
game页面设计包含两部分内容：
- 整体容器和顶端标题：<view>
- 提示图：<image>
- 游戏画布：<canvas>
- 重新开始按钮：<button>
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页面中的画布组件<canvas>，使用bindtouchstart为其绑定触摸事件touchBox。
判断游戏成功。在game.js中的data里添加初始数据isWin，用于标记游戏成功与否。添加函数isWin用于判断游戏是否已经成功。然后修改touchBox函数，在被触发时追加对游戏是否成功的判断，如果游戏成功，不做任何操作。