VUE实现一个Flappy Bird游戏的示例代码

Flappy Bird是一个非常简单的小游戏，在app上大家都玩过。这是一个持续的动画，所以把这个动作放在动画帧里，即requestAnimationFrame，每一帧的函数定义为loop()。所以在loop函数中，根据offsetTop和父元素的clientHeight来判断小鸟是否触碰到了画面的上下边界，是则游戏结束；否，则增加style.top让小鸟坠落。游戏中，玩家按下空格键，小鸟会向上跳跃一段距离，用this.jumpFlag[true/false]来记录这一状态，当按下时，置为true，loop函数中小鸟jump()，在jump到一定距离后，jumpFlag置为false，小鸟开始坠落。在我看来，难点主要集中在管道的移动、触碰判定以及分数计算上。