用html5实现的flappy-bird

可能网上早就有几个flappy-bird的html5版本啦，到这个时候flappy-bird可能也没有之前那么火了，但是作为一个新手，自己思考，自己动手写一个flappy-bird的demo还是很有成就感的。

flappy-bird的html5版无非是通过canvas来画的，可能网上也有webgl版本的，但是我貌似没见过，如果你发现了，希望告诉我一声，咱们一起讨论讨论。之前在微博上看到有大神用60几行就写出了一个demo，这让我写完之后发现自己的demo有将近200多行的代码，瞬间让我对大神们膜拜的五体投地，当然我的代码也可以精简到几十行，不过那样写出来，不便于维护，对于新人也很难看懂。

html代码我就不写了，大家也都知道，如果你连html代码也需要的话，那你接下来也就没必要看了，还不如直接跳转到w3school.com.cn。

接下来就是重点的js了，至于css吗？你知道的css对于canvas是无效的，那我干嘛还写css呢，这不是浪费生命吗

一开始先是定义bird对象，建议用构造函数的方法，当然你也可以用工厂函数，这没什么关系的

var Bird = function (param) {
				this.x = param.x || 0;
				this.y = param.y || 0;
				this.w = param.w;
				this.h = param.h;
				this.yDir = param.yDir || 1;
				this.img = param.img;

				return this;
			}

创建一个bird的构造函数，传入参数param 并返回this,参数param是相关的配置参数。

接下来是bird的draw属性，这个属性主要是将bird给画出来

Bird.prototype.draw = function () {

				ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, this.x, this.y, this.w, this.h);

				return this;
			};

ok，就这么简单，只是简单的调用canvas的drawImage方法

接下来就是bird的jump属性，这个属性主要是控制bird的下滑，模仿小鸟的下降