ouc移动软件开发试验六

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

一、实验目标

1、综合所学知识创建完整的推箱子游戏；

2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

关键步骤：

1、需求分析

项目页面需求：该实验需要创建两个页面，分别为首页和游戏页面。首页展示关卡菜单，包括关卡预览图和关卡编号。点击对应关卡后，进入游戏画面。

首页功能需求：首页需要包含标题和关卡列表。关卡至少要有4个关卡选项,每个关卡显示预览图片和第几关。点击关卡列表可以打开对应的游戏画面。

游戏页面功能需求：游戏页面需要显示第几关、游戏画面、方向键和“重新开始”按钮。点击方向键可以使游戏主角自行移动或推动箱子前进。游戏画面由8×8的小方块组成,主要包括地板、围墙、箱子、游戏主角和目的地。点击“重新开始”按钮可以将箱子和游戏主角回归初始位置并重新开始游戏。

2、创建项目

使用微信开发者工具创建一个小程序项目，在根目录中生成存放页面文件的pages文件夹。

3、页面配置

创建页面：默认情况下，首页命名为index，其他页面可以自定义。本项目需要创建index（首页）和game（游戏页面）。在app.json文件中配置pages属性，保存后会自动生成对应的页面目录。

删除修改页面：删除index中的原有代码，并创建新页面。

添加文件：在根目录下创建images文件夹存放图片素材，创建util文件夹存放JS文件。在util文件夹中新建data.js文件，用于存放地图数据。

4、代码编写

地图数据编写：在data.js中定义地图数据，用二维数组表示不同元素，例如1代表墙，2代表路，3代表终点，4代表箱子，5代表人物。

部分代码分析：

游戏页面（game页面）的JavaScript脚本，用于实现推箱子游戏的逻辑。以下是代码的主要部分分析：

1、数据结构

map：表示游戏地图的二维数组，其中不同的数字代表不同的元素（例如0代表空地，1代表墙，2代表路，3代表终点，4代表箱子，5代表人物）。

box：表示箱子位置的二维数组，用于记录每个格子上的箱子状态（0表示无箱子，4表示有箱子）。

w：定义了每个格子的宽度，用于绘制时的坐标计算。
变量初始化

row 和 col：分别表示人物的行和列位置。

2、函数定义

initMap(level)：根据关卡级别初始化地图数据，设置人物和箱子的初始位置。

drawCanvas()：绘制游戏画面，包括背景、箱子、人物等元素。

up(), down(), left(), right()：处理人物在地图上向上、下、左、右移动的逻辑，包括推动箱子和判断是否可以移动。

isWin()：检查是否赢得游戏，即所有箱子是否都在目标位置上。

checkWin()：调用isWin()函数，如果赢得游戏，则弹出胜利提示框。

restartGame()：重启游戏的函数，重置地图并重新绘制。

三、程序运行结果

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

四、问题总结与体会

技术学习

在此次实验中，我学习并实际应用了微信小程序的开发技术栈，包括WXML、WXSS以及JavaScript。通过编写页面结构、样式表现及交互逻辑，我逐步掌握了小程序开发的基本流程。特别是对于组件的使用和页面间的数据传递，这些实践经验让我对小程序的架构有了更加清晰的认识。

逻辑思维训练

推箱子游戏的核心在于逻辑判断和策略选择。编写代码实现人物移动、箱子推动及胜利条件判断的过程中，我不断调试、优化算法，确保游戏的逻辑准确无误。这个过程极大地锻炼了我的逻辑思维能力和解决问题的能力。

用户体验考量

在实验过程中，我时刻考虑用户体验。无论是地图设计、操作流畅性还是界面布局，我都力求给用户提供一个直观、易用的游戏界面。通过多次测试和修改，我逐渐理解了用户中心设计思想的重要性，并学会了根据用户反馈进行产品迭代。