canvas小案例：fly birds

我们可以看到这个游戏由背景蓝天，土地，小鸟，管道四部分组成，在开始游戏我们必须保证全部加载完所有图片资源，这里书写一个函数传进所有图片资源，再通过回调函数的方式返回加载好的图片资源

// 思路： 
// （1）遍历imgUrl,统计imgUrl次数，创建img对象 
// （2）调用img对象onload方法，所有加载完成后给fn 
function loadedImg(imgUrl,fn){ 
	// 用来保存图片资源 
	var imgObj={}; 
	var tempImg,loaded=0,imgLenght=0; 
	for(var key in imgUrl){ 
		// 每循环一次加一下，统计次数 
		imgLenght++; 
		// 获取img对象 tempImg=new Image(); 
		// 把所有图片资源依次循环赋值temImg.src 
		tempImg.src=imgUrl\[key\]; 
		// 然后再把这张图片依次存入imgObj imgObj\[key\]=tempImg; 
		// 注册所有图片加载事件 tempImg.onload=function(){ 
			// 统计加载的次数 
			loaded++;
			 // 如果加载的次数与之前循环的次数相同的话，说明所有图片加载完毕 
			 if(loaded=imgLenght){ 
			 	// 把加载的资源给回调函数 
			 	fn(imgObj); 
			 	} 
			 	}; 
			 	} 
			 }

（1）绘制背景

和轮播图差不多，准备两张相同的背景图，在计时器里调用上下文对象的drawImg（）方法不断的向左偏移重绘即可，其构造函数如下

// 书写绘制背景函数 
function Sky(ctx,img,speed){ 
	this.ctx=ctx; 
	this.img=img; 
	this.width=this.img.width; 
	this.height=this.img.height; 
	Sky.len++; 
	this.x=this.width * (Sky.len-1); 
	this.y=0; 
	this.speed=speed||2; 
	} Sky.len=0; 
	// 给原型增加方法 Sky.prototype={
	 // 重新指向构造函数 constructor: Sky,
	 // 绘制背景 draw:function(){ 
	 	this.ctx.drawImage(this.img,this.x,this.y);
	 	 }, 
	 	 update:function(){ 
	 	 	// 让它往右走 this.x-=this.speed; 
	 	 	if(this.x<-this.width){ 
	 	 		this.x += this.width * Sky.len;
	 	 		 }
	 	 		  } 
	 	 		  } 
	 	 		  //我们再在loadImg函数中调用即可 
	 	 		  // 先把图片调用出来 
	 	 		  loadedImg({ beiJing:'./images/sky.png', bird:'./images/bird.png', land:'./images/land.png', pipeDown:'./images/pipeDown.png', pipeUp:'./images/pipeUp.png', 
	 	 		  }, function(imgObj){ 
	 	 		  	// 实例化天空 var sky=new Sky(vas,imgObj.beiJing,2); 
	 	 		  	var sky2=new Sky(vas,imgObj.beiJing,2);
	 	 		   // 让canvas的宽高与背景图自适应 
	 	 		   ctx.width=imgObj.beiJing.width; 
	 	 		   ctx.height=imgObj.beiJing.height; 
	 	 		  	// 让背景动起来 setInterval(function(){ 
	 	 		  		//第一张图片 
	 	 		  	sky.update(); 
	 	 		  	sky.draw(); 
	 	 		  	//第二张图片 
	 	 		  	sky2.update(); 
	 	 		  	sky2.draw(); },50) 
	 	 		  	})

（2）绘制大地同理
（3）绘制小鸟同理，需要额外为画布添加一个点击事件，点击时让小鸟的this.y(y轴坐标)往上移动。
（4）绘制管道的思路：每一组的管道，上管道和下管道的长短随机生成，但是中间的间距是一定的，我们将中间的距离固定，上管道的长为随机生成，下管道的长即画布高减去大地高减去中间间距即可也是随机的，让它移动起来方法也是和前面一样的。