一、实验目标
- 综合应用所学的知识创建完整的推箱子游戏;
- 熟练掌握
<canvas>
和绘图API。
二、实验步骤
-
根据实验手册上的网址下载游戏图片,然后在微信开发者工具中创建项目。
-
此次的项目一共需要两个页面,包括:
- 首页——
index
- 游戏页——
game
在
app.json
文件的pages
属性中添加pages/game/game
,保存后会在pages
文件夹中自动生成game
目录。然后在window
属性中修改导航栏背景颜色、文字内容、字体颜色等属性。 - 首页——
-
在总目录下新建两个文件夹:
images
——存放图片素材utils
——存放公共js
文件
images
文件夹中的图片为4张游戏关卡图片和5个游戏图标素材。 -
在
app.wxss
中设置公共样式,代码如下:首页设计在
pages/index/index.wxml
和pages/index/index.wxss
中编写代码。游戏页设计在
pages/game/game.wxml
和pages/game/game.wxss
中编写代码。 -
公共逻辑实现,在
utils
文件夹中新建data.js
文件,存放4个不同关卡的地图数据,以二维数组的形式存放。最后需要通过
module.exports
语句对外暴露数据接口。 -
首页逻辑实现,在
pages/index/index.js
中编写代码,然后在pages/index/index.wxml
中修改对应函数的点击事件。首页需要实现两个功能:- 展示关卡列表
- 点击图片能跳转到游戏页面
-
游戏页逻辑实现,在
pages/game/game.js
中编写代码,然后在pages/game/game.wxml
中修改对应函数的点击事件。首先需要在game.js
文件顶端记录一些游戏初始数据信息,包括地图图层数据、箱子图层数据、方块宽度、初始化游戏主角(小鸟)所在行和列等。添加自定义函数:initMap
——初始化游戏地图数据drawCanvas
——绘制地图onload
——创建画布上下文,依次调用initMap
和drawCanvas
up
——游戏主角(小鸟)上移down
——游戏主角(小鸟)下移left
——游戏主角(小鸟)左移right
——游戏主角(小鸟)右移isWin
——判断游戏是否成功checkWin
——一旦游戏成功就弹出提示对话框restartGame
——重新开始游戏
保存编译运行即可。
三、程序运行结果
首页进行游戏选关:
点进第一关游戏初始界面:
游戏成功弹出弹框提示:
关闭弹框后:
四、问题总结与体会
- 通过这次实验,熟悉了公共
js
文件夹utils
的用法 - 推箱子游戏中的逻辑实现需要考虑的情况很多,这启发我们在今后的开发过程中要尽可能考虑周全一些。