实验6：推箱子游戏

一、实验目标

综合应用所学的知识创建完整的推箱子游戏；
熟练掌握<canvas>和绘图API。

二、实验步骤

根据实验手册上的网址下载游戏图片，然后在微信开发者工具中创建项目。
此次的项目一共需要两个页面，包括：
- 首页——index
- 游戏页——game
在app.json文件的pages属性中添加pages/game/game，保存后会在pages文件夹中自动生成game目录。然后在window属性中修改导航栏背景颜色、文字内容、字体颜色等属性。
在总目录下新建两个文件夹：
- images——存放图片素材
- utils——存放公共js文件
images文件夹中的图片为4张游戏关卡图片和5个游戏图标素材。
在app.wxss中设置公共样式，代码如下：

首页设计在pages/index/index.wxml和pages/index/index.wxss中编写代码。

游戏页设计在pages/game/game.wxml和pages/game/game.wxss中编写代码。
公共逻辑实现，在utils文件夹中新建data.js文件，存放4个不同关卡的地图数据，以二维数组的形式存放。

最后需要通过module.exports语句对外暴露数据接口。
首页逻辑实现，在pages/index/index.js中编写代码，然后在pages/index/index.wxml中修改对应函数的点击事件。首页需要实现两个功能：
- 展示关卡列表
- 点击图片能跳转到游戏页面
游戏页逻辑实现，在pages/game/game.js中编写代码，然后在pages/game/game.wxml中修改对应函数的点击事件。首先需要在game.js文件顶端记录一些游戏初始数据信息，包括地图图层数据、箱子图层数据、方块宽度、初始化游戏主角（小鸟）所在行和列等。添加自定义函数：
- initMap——初始化游戏地图数据
- drawCanvas——绘制地图
- onload——创建画布上下文，依次调用initMap和drawCanvas
- up——游戏主角（小鸟）上移
- down——游戏主角（小鸟）下移
- left——游戏主角（小鸟）左移
- right——游戏主角（小鸟）右移
- isWin——判断游戏是否成功
- checkWin——一旦游戏成功就弹出提示对话框
- restartGame——重新开始游戏
保存编译运行即可。