JavaScript实现Fly Bird小游戏

JavaScript实现Fly Bird小游戏

Runner_Yang 前端先锋

做者：Runner_Yang（简书做者）
本文由原做者受权发布，如转载，请联系受权。

1.分析页面结构，理清需求和功能
游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。
1.1 开始界面

start.gif

• 游戏的大背景
• 上下移动的游戏标题和翅膀摆动的小鸟
• start 按钮，点击进入游戏界面
• 一直移动的地面

1.2 游戏界面

play.gif

• 显示越过障碍数量的计分器
• 移动的障碍物，分别是上管道和下管道
• 点击游戏界面，小鸟向上飞起，而后在重力做用下下坠，
• 当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面

1.3 结束界面

• Game over 提示面板
• OK 按钮

2. 开发“开始界面”
考虑到草地的移动效果，咱们在页面中加入两个草地

2.1 HTML

2.2 CSS

将wrapBg中的overflow:hidden注释掉的页面效果

开始界面.jpg
2.3 JS
小鸟煽动翅膀的效果须要用到逐帧动画的原理

逐帧动画是一种常见的动画形式（Frame ByFrame），其原理是在“连续的关键帧”中分解动画动做，也就是在时间轴的每帧上逐帧绘制不一样的内容，使其连续播放而成动画。

bird1.png

bird0.png

2.3.1 开始标题的摆动

2.3.2 移动的草地

2.3.3 Start按键

完成后的效果（注释掉了wrapBg中的overflow:hidden）

start01.gif

接下来咱们开发“游戏界面”

3. “游戏界面”的开发
游戏界面中有三样元素，分别是“小鸟”，“障碍”，和“计分器”，咱们依次来建立相应的对象。

3.1 小鸟
首先，建立小鸟的对象， bird.js 文件。

下面，实现点击start按钮时，加载小鸟。(在以前的代码基础上添加)

添加小鸟后的效果

---

play01.gif
3.2 障碍（上管道和下管道）

block示意图.png

障碍分为上管道和下管道，如示意图所示结构嵌套，这样就能够经过随机设置DownDiv2的高度和gapHeight的高度，来改变生成障碍的形态

block.js

公共对象文件 baseObj.js ，用来提供随机数，和两个矩形div的碰撞检测

下面个人想法是在start按钮点击的时候建立一个block，把这个block存储到数组blocksArr 中，在landTimer 定时器的方法 landRun 中检查此数组的长度，若是数组不为空数组，那么就让数组中全部的block移动。
检查数组中最后一个block离开的距离，达到必定距离，就从新new 一个block，添加到数组。
检查数组中第一个block，一旦达到必定位置，就在结构中移除downDivWrap和upDivWrap，同时在数组中删除block。

当前的游戏效果

play02.gif
3.3 计分器
游戏中的计分器相对较好实现，咱们就实现最大为三位数的计分器吧。

html

css样式

js

实现计数器功能，最重要的是如何判断走过水管的数量，咱们以水管的位置来判断。bird的定位left为50px，水管的宽度是62px，当水管越太小鸟的时候，水管距离它父级的定位 offsetLeft 是 -12px。每当有一个水管到达此位置，score++；

在start按钮的事件处理程序中加入

目前效果，计数器功能完成。

play03.gif
4.“结束界面”的开发
当小鸟和管道碰撞或者和地面碰撞时候，隐藏计分器，弹出结束面板。
结束界面主要有“结束面板”和“ok”按钮，这里须要为“ok”按钮添加点击事件。

最终效果

---

play04.gif

有兴趣的朋友，能够下载代码，而后加上音效。OK，结束。点击“阅读原文”获取源码。