flappy bird制作全流程：

一、前言

像素小鸟这个简单的游戏于2014年在网络上爆红，游戏上线一段时间内appleStore上的下载量一度达到5000万次，风靡一时，

近年来移动web的普及为这样没有复杂逻辑和精致动画效果，但是趣味十足的小游戏提供了良好的环境，

同时借助各大社交软件平台的传播效应，创意不断的小游戏有着良好的营销效果，得到了很多的关注。

此前在网上查询了很多关于这个小游戏的资料，但是大多杂乱无章，自己的结合相关教程将这个游戏的主要框架整理出来，供大家一起学习。

二、技术要点

 基本JavaScript基础 ，canvas 基础， 面向对象的思想；

三、思路整理 整个游戏的逻辑比较简单：

首先游戏规则：鸟撞到管道上，地上要死亡，飞到屏幕外要死亡。

其次：鸟在飞翔的过程中，会掉落，类似落体运动，需要玩家不断点击屏幕让鸟向上飞。

再次就是：鸟和背景元素的相对移动的过程，鸟不动，背景左移。

将整个游戏细化：

我们采用面向对象的思路来制作，具体的事物用构造函数来创建，方法放到构造函数的原形对象中。

游戏细化这个过程不是一蹴而就的，如果在没有相关指导的情况下，自己要不断的结合自己的想法去试错。

本人使用的方式是使用Xmind将流程以脑图的形式绘制下来，分块去做，不断细化记录自己的思路，最终呈现的效果如下：

（顺序按照图片中的序号去看  脑图、素材、及完整源码下载地址： 想练习的同学可以点这里）

脑图分为三大块：1、准备阶段 2、主函数 3、游戏优化。

 

 

 四、游戏实现：

现在结合脑图来逐步实现我们的游戏。

1.设置canvas画布，准备图片数据，当图片加载完成后执行回调函数；

<canvas></canvas> <script> var imglist = [ { "name":"birds","src":"res/birds.png"}, { "name":"land","src":"res/land.png"}, { "name":"pipe1","src":"res/pipe1.png"}, { "name":"pipe2","src":"res/pipe2.png"}, { "name":"sky","src":"res/sky.png"} ]; var cvs = document.getElementById("cvs"); var ctx = cvs.getContext("2d"); </script>

画布准备 ，图片数据准备

这里这个入口函数的设置要注意，必须保证图片资源加载完成后再执行其他操作，每加载一张图片我们让imgCount--，减到0的时候再执行主函数；

function load (source, callback ){ var imgEls={}; var imgCount=source.length; for (var i = 0; i < imgCount; i++) { var name = source[i].name; var newImg = new Image (); newImg.src = source[i].src; imgEls[name] = newImg; imgEls[name].addEventListener("load",function(){ imgCount--; if(imgCount==0){ callback(imgEls); }; }) }; };

入口函数设置

主循环的设置：这里我们不使用setInterval来控制循环次数，我们使用一个叫requestAnimationFrame()的定时器

　　　　　　　因为setInterval会产生时间误差，setInterval只能根据时间来移动固定距离。

　　　　　　　这对于轮播图一类几千毫秒切换一次的动作来说并没有什么关系，但是对于我们16-18毫秒绘制一次的动画是非常不准确的；

　　　　　　　requestAnimationFrame()这个定时器的好处是根据浏览器的性能来执行一个函数，我们用来获取两次绘制的间隔时间；

　　　　　　　移动距离的计算改变成速度×间隔时间的方式，来解决绘图不准确的问题。

run(){ var now = Date.now(); //获取最新时间 dt = now - preTime; //获取时间间隔 preTime = now; //更新当前时间 ctx.clearRect(0,0,800,600); 绘制代码执行区域 //----------------------------------------------- requestAnimationFrame(run); //再次执行run函数 } requestAnimationFrame(run); //首次执行run函数；

设置绘制方式

2、主函数分为两部分功能 ，简单说就是把图画上去，然后处理动态效果，再判断一下是否犯规。

2.1 小鸟的绘制：

　　小鸟本身有一个翅膀扇动的效果，和一个下落的过程。

　　翅膀扇动的过程是一张精灵图三幅画面的的切换（设置一个index属性，控制精灵图的位置），下落过程是其y坐标在画布上的移动（）；

　　所以小鸟的构造函数中应该包括（图源，x坐标，y坐标，速度，下落加速度，ctx(context画布)）等参数。

　　这里需要注意几点：