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

flappy bird是一个非常简单的小游戏，在app上大家都玩过。这里就用vue来实现一个简单的pc版flappy bird，娱乐一下~~~~~

要实现这个游戏，首先来分析一下游戏界面里哪几块东西需要动起来：

1、第一当然就是上下移动的小鸟；

2、横向移动的背景图，让小鸟看起来在横向飞行；

3、从画面右端进入的一排排管道。

这样很明确了，我们让上面3块内容按照规律运动起来，然后再加上规则边界判断和计分，就可以得到一个完整的游戏。所以就一块块来解决。

先来定义一些常量和变量：

1、上下移动的小鸟

为了分别控制小鸟和管道的位置，元素定位均采用position: absolute

小鸟本身就是个div+背景图，然后定义一下在界面里的初始位置：

然后，在什么都不操作的情况下，小鸟从初始位置开始"坠落"，小鸟的坠落是一个越落越快的过程，在这里我没有用物理的重力加速度公式，只是简单模拟了一个曲线加速过程。这是一个持续的动画，所以把这个动作放在动画帧里，即requestanimationframe，每一帧的函数定义为loop()。

所以在loop函数中，根据offsettop和父元素的clientheight来判断小鸟是否触碰到了画面的上下边界，是则游戏结束；否，则增加style.top让小鸟坠落。

游戏中，玩家按下空格键，小鸟会向上跳跃一段距离，用this.jumpflag[true/false]来记录这一状态，当按下时，置为true，loop函数中小鸟jump()，在jump到一定距离后，jumpflag置为false，小鸟开始坠落。

所以，jump函数很容易实现：

2、横向移动的背景图

这个比较简单，就是background-position无限循环切换就行了，位置根据自己下载的背景图素材宽度决定。

经过这两步，我们就可以得到一个正在飞行的小鸟了，用document.onkeydown监听空格键来切换jumpflag，如下图：

3、从右往左一移动进入管道

管道是由上下两个div组成，每个div通过不同的top: -xx和bottom: -yy实现中间有间隙。

首先实现生成一个随机间隙管道的函数，管道存放在pipearr对象数组中：

然后需要将管道移动起来，即loop()中管道移动函数pipesmove()，整个函数实现如下：

这里做了五件事：

（1）管道出了左边画面后shift()最左的管道；

（2）最右的管道离画面右侧一定距离后，加入新的一根管道；

（3）循环遍历中，判断小鸟是否进入了某一根管道的范围，判断小鸟top是否有触碰到上下管道，触碰则输；

（4）当某一个管道刚好位于小鸟左侧时，证明小鸟成功通过，分数+1；

（5）每个管道移动2px像素，数值记录在right属性里。

通过dom里:style设置right就可以使得管道横向移动了

以上就是vue实现flappy bird的思路和核心代码了，总共也就两百多行代码。在我看来，难点主要集中在管道的移动、触碰判定以及分数计算上。当然代码里还有很多可以优化的不足点，共勉~~