手柄君的小阁

个人私货聚集地

Javascript实现FlappyBird基本功能示例及源码

本文最后更新于 2018 年 3 月 5 日,其中的内容可能有所发展或发生改变,敬请注意。


为了准备万恶的世界技能大赛省队选拔赛……被拉去集训了……
于是……现在……
又……
一个坑爹的FlappyBird……
HTML和CSS没按照模板来
素材网上扒的
Js基于之前的 >半成品轮子< 再写的

GitHub
Gitee

现在已作为半成品轮子内附DEMO之一

C键有惊喜
尽量使用ES5和以上版本的优雅语法

在线浏览:>点此试玩<
源码下载:FlappyBird

来讨论一下实现逻辑

首先所有要显示的元素包含

背景(一张图)
地面(会移动,所以两张图)
管道(上下一对两张,一共两队四张)
鸟(一张)
得分(根据长度,一位一张)

因为封装后的方法类似橙光逻辑,那么,就类似橙光语法
循环
| 计时器+1
| 当计时器 = 1N
|| 重置地板位置
|| 刷新管道
|| 更新分数
| 移动地板
| 当计时器=2N
|| 重置地板位置
|| 刷新2号管道
|| 更新分数
| 计算鸟
| 计算管道
| 计算碰撞
| 等待1帧
结束循环

使用了自身呼叫的递归实现了循环……
详情有任何疑问还请留言……

来一发吐槽