移动软件开发实验6推箱子

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的语法也更加熟悉。