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。通过编写页面结构、样式表现及交互逻辑,我逐步掌握了小程序开发的基本流程。特别是对于组件的使用和页面间的数据传递,这些实践经验让我对小程序的架构有了更加清晰的认识。
逻辑思维训练
推箱子游戏的核心在于逻辑判断和策略选择。编写代码实现人物移动、箱子推动及胜利条件判断的过程中,我不断调试、优化算法,确保游戏的逻辑准确无误。这个过程极大地锻炼了我的逻辑思维能力和解决问题的能力。
用户体验考量
在实验过程中,我时刻考虑用户体验。无论是地图设计、操作流畅性还是界面布局,我都力求给用户提供一个直观、易用的游戏界面。通过多次测试和修改,我逐渐理解了用户中心设计思想的重要性,并学会了根据用户反馈进行产品迭代。