网页游戏Flappy Birds从0开始制作（二）：场景Land类

网页游戏Flappy Birds从0开始制作（二）：场景Land类

整个游戏的思维方式是背景层向后移动，而bird是在原地上下跳跃来躲避管道，这种方式在2D游戏中很常见，比如某某跑酷类游戏。

Land类的编写实质上分为4个主要函数：

构造函数：给地图一个构造函数，并赋予其图片，位置，速度，以及canvas的绘制

var Land=function(img,x,speed,ctx){
	this.img=img;
	this.x=x;
	this.speed=speed;
	this.ctx=ctx;
}

然后就是Draw函数，将land绘制到Canvas中的函数（注意这个方法是在Land的原型上添加的，它是属于Land的）

Land.prototype.draw=function () {
	//画出背景land，设置初始坐标
	this.ctx.drawImage(
		this.img,this.x,488
		)
}

同样由于游戏是背景层的移动，所以我们需要多张背景land图片来交替显示，从而需要setNum方法：

Land.prototype.setNum=function (num) {
	Land.num=num;
}

最后就是背景更新函数，背景层以一定速度向后移动，当背景的x坐标低于某个值时，让其重新更新坐标，使其能完成交替效果：

Land.prototype.update=function(dt){

	this.x=this.x+this.speed*dt;
	console.log(this.x);
	if(this.x<-336){
		this.x=this.x+Land.num*336;
	}
}

以上就是Land类所有方法。

贴上源码：

//Land构造函数 
var Land=function(img,x,speed,ctx){
	this.img=img;
	this.x=x;
	this.speed=speed;
	this.ctx=ctx;
}
Land.prototype.draw=function () {
	//画出背景land，设置左上角坐标
	this.ctx.drawImage(
		this.img,this.x,488
		)
}
Land.prototype.setNum=function (num) {
	Land.num=num;
}
Land.prototype.update=function(dt){

	this.x=this.x+this.speed*dt;
	console.log(this.x);
	if(this.x<-336){
		this.x=this.x+Land.num*336;
	}
}