这只蠢萌的Bird，当年虐了不少人

虽然这个游戏的热度早已不在，但用这个创意做出一个H5还是挺牛的。如果把里面的逻辑关系搞清楚了，之后做H5小游戏就会666，把教程分享出来，和大家一起进步！

前期准备：

H5工具：Mugeda（www.mugeda.com）

浏览器：下载Chrome浏览器，这是对H5支持最好的，方便边做边调试

详细分解步骤：

【  1、制作向后循环移动的背景图 】

1、用Mugeda内置的曲线工具绘制云朵，调节可以用节点工具。

2、在舞台上添加定时器，给定时器命名为yun#1，在长度里设置成5秒（就是白云从右侧飘到左侧的时间）。

3、选择白云，在关联对象选择yun#1，关联属性选择文本取值，主控量是5的时候，被控量是380，主控量是0的时候，被控量是-170。

4、用Mugeda内置的直线工具绘出山，鼠标右键转换为元件。

5、在山的元件里，做关键帧动画：让山从右边移动到左边。

【  2、在Mugeda里绘制鸟】

1、新建元件，分图层绘制鸟身、鸟翅膀和鸟脚。

2、给鸟的每个部位制作关键帧动画。

3、鸟的大小可以在舞台里调节。

【  3、鸟不受控制的话向下落】

1、在舞台上添加定时器，给定时器命名为鸟往下落。

2、给鸟的元件命名。

3、给鸟往下落这个定时器添加行为，行为是改变元素属性，触发条件为属性改变。

4、点击编辑行为按钮，元素名称为鸟，元素属性为上，赋值方式为在现有值基础上增加，取值为0.5（这个是控制鸟下落的速度）

5、设置鸟往下落定时器的精度为毫秒，是否循环为循环。

【  4、新建一个控制层】

1、新建图层2为控制层，在这个图层上绘制铺满画布的方框，并调整透明度为0。

2、给控制层的方框添加行为，行为是控制元素属性，触发条件是点击；元素名称是鸟，元素属性是上，赋值方式是在现有基础上增加，取值为-35。

【  5、加上柱子做障碍物】

1、新建图层绘制两个矩形，作为障碍物，同时选中两个，鼠标右键组合。

2、并转化成元件。

3、在柱子元件里，做柱子从右边移动到左边的关键帧动画。

4、回到舞台，在柱子图层加入随机数，并给随机数命名为suiji。

5、随机数的取值范围就是柱子运动至最上和最下的上坐标，设置最小值-330，最大值-15，更新间隔1。

6、给元件柱子命名，进入柱子元件，新建图层，在最后一帧插入关键帧，并在舞台绘制一个方块，给方块添加行为。

7、添加改变元素属性行为，触发条件为出现。

8、进入行为编辑页面，设置如下。意思就是柱子开始的时候上坐标就不同，元件最后一帧，方框出现即改变。

【  6、加上柱子做障碍物】

1、在柱子元件里，画个方框代替小鸟，在图层1上绘制小鸟撞到柱子的区间，小鸟在这个区间撞到就会死。

2、删掉小方块，在舞台上添加一个定时器，精度设置为毫秒，计时方向为倒计时，长度为30秒。

3、在舞台新建一个页面，做失败的结果页。

4、在元件内的计时器添加行为，行为是跳转到页，触发条件是出现。点击编辑行为，出现就跳转到第二页，填写逻辑表达式：{{鸟.top}}{{柱子.top}}+380+130（解释：鸟遇到上下两个柱子就会死）

学习更多逻辑表达式：http://bbs.mugeda.com/?/article/406

【  7、为游戏加上计分】

1、在舞台界面，添加文本框，并给文字命名fenshu。

2、进入柱子元件，选择最后一帧，给方框加行为。

3、添加改变元素属性的行为，触发条件为出现。

4、进入到行为编辑页面，元素名称为fenshu，元素属性为文本取值，赋值方向为在现有值基础上增加，取值为1。

怎么样，按照教程一步步做，是不是还挺容易的？逻辑表达式是难点，大家好好琢磨下这个知识点。

这个还有配套的视频教程，看不明白文字教程的，出门左转看视频：

https://ke.qq.com/course/189515#tuin=6732f765