java fly bird小游戏_实战|JavaScript实现Fly Bird小游戏-【安基网】

1.分析页面结构，理清需求和功能

游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。

1.1 开始界面

1、游戏的大背景

2、上下移动的游戏标题和翅膀摆动的小鸟

3、start 按钮，点击进入游戏界面

4、一直移动的地面

1.2 游戏界面

1、显示越过障碍数量的计分器

2、移动的障碍物，分别是上管道和下管道

3、点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，

4、当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面

1.3 结束界面

1、Game over 提示面板

2、OK 按钮

2. 开发“开始界面”

考虑到草地的移动效果，我们在页面中加入两个草地

2.1 HTML

2.2 CSS

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

2.3 JS

小鸟煽动翅膀的效果需要用到逐帧动画的原理

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

2.3.1 开始标题的摆动

2.3.2 移动的草地

2.3.3 Start按键

完成后的效果(注释掉了wrapBg中的overflow:hidden )

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

3. “游戏界面”的开发

游戏界面中有三样元素，分别是“小鸟”，“障碍”，和“计分器”&#x