推箱子游戏

2023年夏季《移动软件开发》实验报告

一、实验目标

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

二、实验步骤

1.项目创建和配置

1.1创建新项目，选择不使用云服务，命名为Game2；

1.2将app.json文件中的pages/logs/logs改为pages/game/game，保存，同时删除logs文件夹；

1.3删除以下文件：

(1)删除utils文件夹；

(2)删除index.wxml和index.wxss中的全部代码；

(3)删除index.js中的全部代码，并输入page找到第二个选项按下Tab键；

(4)删除app.wxss中的全部代码；

(5)删除app.js中的全部代码，并输入app按下Tab键。

1.4创建文件

(1)新建images文件夹，下载并将https://gaopursuit.oss-cn-beijing.aliyuncs.com/course/mobileDev/boxgame_images.zip压缩包中的文件解压至images文件夹中；

(2)在utils文件夹下新建文件data.js，用作公共文件。

2.页面配置

2.1导航栏设计

更改app.json文件如下：

得到效果为：

2.2页面设计

（1）公共样式设计

在app.wxss中设置页面容器和顶端标题的公共样式如下：

（2）首页设计

首页包含两个部分，标题和关卡列表

修改index.wxml文件如下：

对应地修改wxss文件如下：

得到的效果图为：

（3）游戏页面设计

游戏页面内容包括整体容器、顶端标题和游戏画布，修改game.wxml文件如下:

对应地修改game.wxss文件如下:

3.逻辑设计

3.1公共逻辑

在data.js文件中配置游戏地图的数据如下,其中map1-map4代表4个不同关卡的地图数据，以二维数组的形式存放：

需要在game.js中引用公共js文件，如下:

3.2首页逻辑

首页主要实现两个功能：展示关卡列表和点击图片能跳转到游戏页面。

（1）关卡列表展示

修改index.js文件如下：

接着为关卡对应的view组件添加wx:for属性循环显示关卡列表数据和图片：

得到的效果图为;

（2）点击跳转游戏页面

修改index.wxml文件如下，其中data-level属性携带了关卡图片下标信息：

相应地在index.js中实现自定义点击事件choosLevel函数：

此时实现了点击跳转到game页面，并且成功携带了关卡图片数据，但游戏画面是不正确的，需要继续处理。

3.3游戏页逻辑

游戏页需要实现以下三个功能：

（1）显示当前是第几关

修改game.js文件如下：

修改对应game.wxml文件如下:

此时点击不同关卡的图片跳转到对应正确的内容了。

（2）游戏逻辑实现

首先在game.js文件中准备以下初始数据信息：

接着初始化游戏画面，在game.js文件中添加initMap函数，用于初始化游戏地图数据，实现思路为：先从data.js中读取对应关卡的游戏地图数据，然后使用双重for循环对每一块地图数据进行解析，并更新当前游戏的初始地图数据、箱子数据以及游戏小鸟所在的位置，如下;

然后在game.js中添加自定义函数drawCanvas，用于将地图信息绘制到画布上：

最后在game.js的onLoad函数中创建画布上下文，并依次调用自定义函数initMap和drawCanvas，对应的js文件修改如下：

当前效果为：

接着是方向键逻辑的实现。

修改game.wxml页面的4个方向键button，为其绑定点击事件：

接着在game.js文件中实现自定义函数up、down、left、right，分别用于实现游戏小鸟在上、下、左、右4个方向的移动，每次点击在条件允许的情况下移动一格，修改game.js文件如下：

上：

下：

左：

右：

（3）判断游戏成功

在game.js文件中添加自定义函数isWin，用于判断游戏是否成功：

以及自定义函数checkWin，用于实现当判断成功时弹出提示对话框：

最后需要在4个方向键函数中追加判断游戏成功的函数，以up为例：

（4）重新开始游戏

修改game.wxml文件，为“重新开始”按钮追加自定义函数的点击事件：

对应地在game.js文件中实现如下：

实现完毕！

三、程序运行结果

列出程序的最终运行结果及截图。

首页游戏列表：

点击关卡打开：

实现上、下、左、右的移动：

成功后跳出提示框：

点击重新开始按钮：

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

​ 本次实验学习并创建了完整的推箱子游戏，熟练掌握< canvas >和绘图API，对微信开发者工具的使用有了进一步的学习和认识。本次实验重在逻辑部分的实现，巧妙地依靠了两个数组来实现数据的更新。