H5实战教程2：用H5神还原Flappy Bird
用H5神还原Flappy Bird，而且还不用代码哦！
这只蠢萌的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||{{鸟.top}}>{{柱子.top}}+380+130（解释：鸟遇到上下两个柱子就会死）
学习更多逻辑表达式：http://bbs.mugeda.com/?/article/406
【 7、为游戏加上计分】
1、在舞台界面，添加文本框，并给文字命名fenshu。
2、进入柱子元件，选择最后一帧，给方框加行为。
3、添加改变元素属性的行为，触发条件为出现。
4、进入到行为编辑页面，元素名称为fenshu，元素属性为文本取值，赋值方向为在现有值基础上增加，取值为1。
怎么样，按照教程一步步做，是不是还挺容易的？逻辑表达式是难点，大家好好琢磨下这个知识点。
这个还有配套的视频教程，看不明白文字教程的，点击这里看视频。
