AppInventor2复刻FlappyBird

数字创意设计课程大作业。


画布、图像精灵控件的优点与缺陷

  • 图像精灵只能放在画布内

优点

  • 自带与其他图像精灵的碰撞检测
  • 具有自主行为:根据属性值进行移动、旋转

缺点

  • 精灵的X、Y坐标不能取负值,换句话说,不能从屏幕左端、上端移出屏幕。这给动画实现带来困难。

核心模块

小鸟飞行动画实现

将小鸟动作分解成一系列的图片,定时按序更换图片。

代码


地面移动动画模拟

地面图像的X坐标定时减少一小步,减少到特定值后跳回去一大步。换句话说,地面的移动轨迹会是 左左左右左左左右左左左右……
到这里,画布的缺陷导致需要有一块“幕布”来遮挡最左边的部分。

代码


小鸟控制实现

表现:

  • 游戏开始后,触碰屏幕时,小鸟跳起,头朝上抬起
  • 游戏开始后,不触碰屏幕时,小鸟受重力作用向下坠落,头往下垂

实现:

  • 角度:点击屏幕,角度设为45度,再定时减少10度
  • 位置:点击屏幕,速度设为负数(如-20),再定时 速度<-加速度+速度,Y坐标<-速度+Y坐标

代码


柱子数据存储结构

一共有三组柱子,每组柱子里有上柱子、增分板(下文介绍它的作用)、下柱子。容易想到用二维数组来存储。


无限柱子随机高度生成与移动

移动

这里利用图像精灵自带的方向、速度、时间间隔属性,让柱子自己移动。

随机高度

屏幕上方放有幕布。生成柱子时,上柱子的Y坐标在幕布高度范围内随机生成,增分板和下柱子依据上柱子的Y坐标计算而得。

无限柱子

游戏初始化时,每组柱子在屏幕外排好。

当每组柱子到达屏幕最左边,让其直接跳到最右边柱子的右边(在屏幕外),用三组柱子模拟无限组柱子。

代码

柱子初始化

柱子到达最左边后更新



柱子与鸟碰撞检测

这里可以利用图像精灵自带的碰撞检测。另,控件自带碰撞检测是支撑我做这个项目的所有理由。

代码

鸟碰到任何一根柱子就GameOver


得分实现策略

总算要提及奇怪的增分板的作用,其实是供小鸟碰撞,撞到后分数+1

代码


标题显示模块

选择时机更换标题图片并显示标题



分数显示模块

分数包含10个十进制基数,所以要准备十张图片,分数更新时更新图片。

代码


分数结算板显示模块

显示所得分与最高分,最高分显然要用到微数据库,分数显示方法同上

代码


驱动模块

程序入口

  • 设置参数
  • 初始化所有图片尺寸
  • 初始化游戏


初始化所有图片尺寸

初始化图片尺寸举例

地面

柱子


初始化游戏

未开始游戏时的界面,有“Get Ready”标题。


初始化所有物件位置


举例
标题

柱子


开始游戏

当游戏未开始时,触摸屏幕开始游戏。

开始游戏,标题消失,分数显示,游戏元素启动。


游戏结束

当鸟碰到柱子时游戏结束。

定格画面,显示“Game Over”标题,更新最高分,显示分数结算板。


辅助模块

主要是关于各物件的静止、启动、显示、隐藏。