一、项目创建时间

Flappy Bird 项目于 2023年 12月 14日 创建，与五子棋项目一起创建，耗时一个星期左右编写完成。

二、项目介绍

管道小鸟不知道有没有人玩过，我也只是看过别人玩，感觉实现起来比较容易，就上手试了一下。

三、核心实现

管道小鸟刚开始面临的问题还是有很多的，下面我来一一列举，并且说一下我是怎么解决的，当然也许不止我这一种解法，感兴趣的话可以联系我，或者自己实现一个。

下面列举实现要面临的问题：

• 游戏循环：循环的东西有背景和水管，并且还要考虑到游戏的暂停，背景循环还是比较简单的，使用 CSS 动画就可以了，这个应该是比较容易想到和实现的， 我是使用的 background-position 这个 CSS 属性实现的背景无限循环。水管这个在上一个实现的基础上应该容易想到的还是使用 CSS 动画，所以我还是使用的 CSS 动画。

• 游戏暂停：暂停时在上述基础上使用 animation-play-status: pause 即可实现背景和水管移动的暂停。此外还有小鸟的移动以及其他相关的事件都要随之移除， 在游戏再次开始时将事件添加回去，由于暂停要立即执行，所以使用定时器实现就不行了，所以这里使用了 requestAnimationFrame 来执行小鸟的运动等。 暂停时设置暂停的变量即可。

• 小鸟的运动：向下和向上运动逐渐加速，但是浏览器上一直按下某个按键时，开始的 500ms 不会持续触发，所以需要设置一段猛加速的过程。加速的原理想必做过动画的也知道该怎么做，没做过的 也看不到这里，所以就不说了哈，到此为止了。