中国海洋大学计算机学院2026夏季学期《移动软件开发》本科课程实验-实验四：推箱子游戏

姓名：钟志炜 学号：24020007172

姓名和学号？	钟志炜，24020007172
本实验属于哪门课程？	中国海洋大学26夏《移动软件开发》
实验名称？	实验4：推箱子游戏
代码仓库地址	https://github.com/eureka137285/mobile_software_projects

一、实验内容

一、实验目的

1、综合运用微信小程序相关开发知识，完成完整的推箱子小游戏项目，掌握小程序完整项目开发流程。

2、熟练掌握<canvas>画布组件以及小程序绘图 API，能够利用画布完成游戏地图、角色、箱子的绘制与渲染。

3、掌握小程序页面创建、页面跳转、页面之间参数传递的实现方法。

4、理解使用二维数组构建游戏地图的思想，实现人物移动、箱子推动、胜利条件判断、游戏重置等游戏核心逻辑。

5、掌握小程序模块化开发，将关卡地图数据抽离至公共 JS 文件，通过模块导出实现数据复用。

二、实验步骤

1、创建小程序项目

新建空白小程序项目，项目名称设置为boxGame，开发模式选择小程序，不开启云服务，开发语言选择 JavaScript。

2、项目目录与页面配置

修改app.json的 pages 配置项，自动生成index首页与game游戏页面；删除项目自带无用文件，清空各页面初始代码，使用编辑器自动补全Page()、App()函数。新建images、utils文件夹，在 images 下建立 icons 子目录，存放关卡预览图与游戏图标素材；在 utils 目录创建data.js公共数据脚本文件。

3、页面布局与样式开发

修改app.json的 window 配置，自定义导航栏标题与背景颜色；在app.wxss编写全局公共样式。首页完成标题、关卡列表布局，实现两列关卡预览效果；游戏页面完成关卡标题、canvas 画布、方向按钮、重新开始按钮布局，设置自定义编译模式方便调试游戏页面。

4、编写公共关卡地图数据

在utils/data.js中定义 4 套 8×8 二维数组地图map1~map4，数字代表围墙、地板、终点、箱子、人物等不同游戏元素；通过module.exports导出关卡地图集合，供游戏页面引入调用。

5、首页选关逻辑开发

在 index 页面 js 中定义关卡图片数组，使用wx:for循环渲染全部关卡；给关卡条目绑定点击事件，携带关卡下标参数；编写跳转函数，调用wx.navigateTo跳转到游戏页面并传递关卡编号参数。

6、游戏页面核心逻辑开发

1）游戏页面使用require引入公共地图数据；在onLoad生命周期接收页面传递的关卡参数并转换为数字，更新页面关卡标题。

2）定义全局地图、箱子图层数组，定义方块尺寸、玩家角色行列坐标变量。

3）编写initMap()初始化地图函数，解析关卡原始地图，分离背景图层与箱子图层，记录玩家初始位置。

4）编写drawCanvas()绘图函数，清空画布，循环遍历网格绘制背景、箱子、玩家角色，完成画布渲染。

5）为方向按钮绑定上下左右移动事件，编写移动逻辑，增加边界、碰撞检测，实现人物移动与推箱子功能，移动完成后重绘画布。

6）实现胜利判定函数isWin()、checkWin()，全部箱子到达终点后弹出成功提示弹窗，每次移动后执行胜利校验。

7）为重新开始按钮绑定事件，调用初始化地图函数恢复关卡初始状态，重绘画布。

7、整体功能测试

依次测试关卡跳转、地图渲染、人物移动、推箱子、重新开始、游戏胜利弹窗等全部功能，修复程序 bug。

三、实验结果

1、小程序首页正常显示 4 个关卡预览图片，点击关卡可以正常跳转至游戏页面，页面正确展示对应关卡编号；已通关的关卡卡片顶部会显示"已过关"角标，通关状态存入本地缓存，返回选关页时自动刷新。

2、游戏页面 Canvas 画布可以正常渲染 8×8 游戏地图，围墙、地板、终点、箱子、玩家角色图片显示正常。

3、4 个关卡均可正常加载地图，全部游戏逻辑运行正常；新增了规则弹窗提示，并解决了 Canvas 原生组件层级高于普通 view 导致的弹窗、角标被遮挡问题。

4、方向按键功能生效：玩家可以在空地自由移动；遇到墙体无法移动；箱子前方无障碍物时可以推动箱子；箱子前方是墙或者其他箱子时无法推动；方向键已放大至 150rpx，手机上更易点按。

5、点击 "重新开始" 按钮，玩家、箱子可以恢复为本关卡初始位置，地图完成重置；其两侧新增"上一关 / 下一关"切换按钮（首关、末关自动隐藏对应项），游戏中可随时切换关卡。

6、所有箱子全部推至终点位置时，弹出"恭喜过关！"自定义弹窗，显示本关步数，并提供"上一关 / 下一关 / 返回选关页面"三个操作（第 1 关无上一关、最后一关无下一关），游戏胜利判定逻辑生效。

二、问题总结与体会

一、问题总结

1、文件路径错误：使用绝对路径引入公共 js 文件时报错，小程序仅支持相对路径，修改require('../../utils/data.js')后解决。

2、Canvas 画布空白：绘制图片时素材路径书写错误，没有写全/images/icons/路径，导致图片加载失败，核对文件夹路径后修复。

3、参数类型问题：onLoad获取到的关卡参数为字符串，未转为数字，数组索引错乱，使用parseInt()转换数据类型解决。

4、数组下标越界：推箱子逻辑缺少边界判断，访问数组超出 0‑7 范围，增加行列边界校验，限制移动范围。

5、胜利条件不触发：判断条件运算符书写错误，遍历校验逻辑异常，修正判断条件后胜利弹窗可以正常弹出。

6、重新开始功能失效：调用初始化地图时关卡索引传参错误，使用this.data.level‑1获取正确的数组下标。

二、体会

通过本次推箱子小程序实验，完整实践了微信小程序项目开发全流程，加深了对 Canvas 绘图 API 的理解。游戏使用二维数组描述地图，分层维护背景、箱子、角色数据，和传统网页 DOM 开发思路有明显区别。

游戏开发中碰撞检测、边界判断十分关键，每次移动前都需要校验位置合法性，否则会出现越界、逻辑异常。同时掌握了小程序页面跳转与参数传递，学会将公共数据抽离到独立 js 文件，使用模块化方式减少代码冗余。

推箱子业务逻辑不算复杂，但是条件分支较多，一处条件写错就会影响整套游戏逻辑，需要耐心阅读代码、逐步调试。本次实验也让我理解小游戏开发通用流程：初始化地图数据、渲染画面、接收用户交互、修改游戏状态、重新渲染画布。后续还可以拓展功能，例如过关自动跳转下一关、统计游戏步数等。