2024年夏季《移动软件开发》实验报告
姓名和学号? | 未知 |
---|---|
本实验属于哪门课程? | 中国海洋大学24夏《移动软件开发》 |
实验名称? | 实验6:推箱子 |
博客地址? | blog.csdn.net/astroiszz |
Github仓库地址? | gitee.com/astrome |
一、实验目标
1、综合所学知识创建完整的推箱子游戏。
2、能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
1.配置资源文件
将制作小程序需要的图片和数据文件分别存储在image文件夹和utils文件夹中的公用js文件中。
2.界面设计
导航栏设计。
首页设计。
首页分为标题和关卡列表两个部分,首先在app.wxss中统一对所有界面的容器和标题样式进行设计。
首页组件。
预览效果:
接下来设计游戏详情界面,为方便预览,首先添加编译模式。
界面组件及样式设计。
对效果进行预览。(按键中的标识后修改为箭头)
在data.js中保存地图数据,并向外暴露。
外部需要引用时在文件开始输入相应代码。
对首页关卡列表进行详细设计,添加数据并修改组件。
效果:
3.跳转逻辑实现
修改首页相关组件绑定事件并添加对应逻辑函数。
game.js在onLoad中添加代码获取参数并渲染画面。
现在可以正确响应点击事件。
4.画布绘制
先添加所需的数据字段。
用于记录地图数据、箱子数据、agent位置等。
编写函数初始化画布。
编写绘制函数。
现在可以正常绘制游戏画面。
5.游戏逻辑实现
修改按键组件,绑定点击事件。
接下来编写移动和重新开始的逻辑函数。(移动的逻辑函数不全部展示)
所有移动函数最后都需要重新绘制画面,并判断当前状况是否游戏成功。(判赢的函数后面编写)
重新开始。
判赢函数实现。
至此可以正常游戏。
三、程序运行结果
四、问题总结与体会
小程序制作过程中发现在编写绘制画布函数后进行预览时,按键显示异常。
修改按键宽度等操作没有效果,搜索之后发现是小程序开发引擎不完善导致的bug,删除相应代码可解决。
通过本次实验,再次熟悉了通过添加调试模式进行页面预览,以及运用公用js文件的操作。通过app.wxss进行全局样式设计可以避免代码冗余。对于wx:for的语法也更加熟悉。