var Bird = function (img,x,y,speed,a,ctx){ this.img = img; this.x = x; this.y = y; this.speed = speed; this.a =a ; this.ctx = ctx; this.index = 0; //用于制作小鸟扇翅膀的动作 } Bird.prototype.draw = function (){ this.ctx.drawImage( this.img,52*this.index,0,52,45, this.x,this.y,52,45 ) } var durgather=0; Bird.prototype.update = function(dur){ //小鸟翅膀扇动每100ms切换一张图片 durgather+=dur; if(durgather>100){ this.index++; if(this.index===2){ this.index=0; } durgather -= 100; } .speed = this.speed + this.a *dur; this.y = this.y + this.speed * dur; }

　 构造一个小鸟，并且将其动作刷新函数和绘制函数放置在我们上面提到的绘制区域，此后构造出的类似对象都是这样的操作步骤：

　 这里需要注意的一点是，如何让小鸟顺畅的向上飞翔，其实还是物理知识，由于加速度的作用，我们给小鸟一个向上的顺时速度就可以了。

load(imglist ,function(imgEls){ bird = new Bird(imgEls["birds"],150,100,0.0003,0.0006,ctx); preTime= Date.now(); function run(){ var now = Date.now(); dt = now - preTime; preTime = now; ctx.clearRect(0,0,800,600); //--------图片绘制区域------- bird.update(dt) bird.draw(); //------------------------- requestAnimationFrame(run); } requestAnimationFrame(run); //设置点击事件。给小鸟一个瞬时的向上速度 cvs.addEventListener("click",function(){ bird.speed = -0.3; } ) })

效果如下：

2.2天空的绘制：

　　天空的绘制比较简单了，只要使用canvas drawImage的三参数模式就可以（图源，画布上的坐标）。

　　这里唯一注意的一点是，无缝滚动的实现，对于800*600分辨率这种情况我们创建两个天空对象就可以了，但是为了适配更多的情况，我们将这个功能写活

　　在天空的构造函数上加一个count属性设置几个天空图片，count属性让实例通过原形中的方法访问。后面涉及到重复出现的地面和管道，都给它们添加这种考虑。

var Sky = function(img,x,speed,ctx) { this.img = img ; this.ctx = ctx; this.x = x; this.speed = speed; } Sky.prototype.draw = function(){ this.ctx.drawImage( this.img ,this.x,0 ) } Sky.prototype.setCount = function(count){ Sky.count = count; } Sky.prototype.update = function(dur){ this.x = this.x+ this.speed * dur; .x = Sky.count * 800 + this.x; //当向左移动了一整张图片后立刻切回第一张图片 } }

　　同理在主函数中创建2个天空对象，并将更新函数和绘制函数放置在主循环的绘制区域；

　　setcount是用来设置无缝滚动的

　　注意一点：绘制上的图片是有一个层级关系的，不能把鸟画到天空的下面，那当然最后画鸟了，下面涉及到的覆盖问题不再专门提到。

　　这里仅插入部分相关代码