2023年夏季《移动软件开发》实验报告
| 姓名和学号？ | 甘海，21020007018 |
|---|---|
| 本实验属于哪门课程？ | 中国海洋大学23夏《移动软件开发》 |
| 实验名称？ | 实验6：推箱子游戏 |
| 博客地址？ | XXXXXXX |
| Github仓库地址？ | XXXXXXX |
（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
2.1 页面配置
- 项目创建完毕之后，在根目录会生成文件夹pages用于存放页面文件。首页命名为index，表示小程序运行的第一个页面，还需要一个game页面，用来展示游戏的界面
- 删除和修改文件与之前几个项目类似，故在此不在赘述
- 创建其他文件：本项目还需要其他两个文件夹——即images和utils文件夹
- 导航栏设计：
2.2 页面设计
- 公共样式设计
- 首页设计：首页主要包含两部分内容，即标题和关卡列表，页面设计如图所示，计划使用如下组件
- 顶端标题：view组件
- 关卡列表：view容器，内部使用数组循环
- 当前的效果如下图所示：此时可以显示标题和一个临时关卡。由于尚未获得关卡数据，所以暂时无法显示完整的关卡列表，仅供作为样式参考
- 游戏页面设计：游戏界面需要用户点击首页的关卡列表，然后在新窗口中打开该页面。游戏页面包括游戏关卡标题、游戏画面、方向键和重新开始按钮。由于暂时没有做点击跳转的逻辑设计，所以可以在开发工具顶端选择普通编译下的添加编译模式，并携带临时测试参数level=0，最后完成之后的效果如图
2.3 逻辑实现
- 在data.js文件中存储初始的地图数据，这里分别使用map1~map4代表4个不同关卡的地图数据，以二维数组的形式存放。当前地图均由8×8的放个组成，每个位置的数字代表对应的图标素材
- 首页逻辑：在JS文件的data中录入关卡图片的数据信息，这里以4个关卡为例。接着为关卡对应的view组件添加wxfor属性，最后可以成功跳转到对应的游戏界面
-
游戏页逻辑
游戏页主要有以下几个功能需要实现，1.显示当前是第几关 2.游戏地图的绘制 3.4个方向键可以移动游戏主角 4.点击重新开始按钮可以使游戏地图还原成最初状态
-
初始化数据
-
初始化游戏界面：首先需要根据当前是第几关读取对应的游戏地图信息，并更新到游戏初始数据中
-
在game.js文件中添加自定义函数up、down、left和right，分别用于实现游戏主角在上下左右四个方向的移动，每次点击在条件允许的情况下移动一格
- 判断游戏是否成功
- 重新开始游戏
三、程序运行结果
列出程序的最终运行结果及截图。
)
四、问题总结与体会
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。
4.1 遇到的问题
- 问题一：展示的图片和所给的图片不相同
- 解决：在JS文件中的data文件抄写错误，使得显示的元素不一致
- 问题二：文档中没有给出right函数的点击代码
- 解决：仿照up和down的代码把right函数的代码也给补充出来
4.2 收获和体会
- 首先，学会了跳转界面的时候携带参数，在onLoad函数里面来获取携带的参数
- 其次，对于for循环渲染数据的方式了解更加深入了
- 学会了通过控制台调试程序的方法，可以通过console.log打印信息来帮助debug
4.3 课程安排的建议
课程安排挺合理的，通过跟着文档动手写代码便可以学到知识。只是文档中没有给出某些代码的解释，如果能够给出未出现过的代码解释的话就更好了