bird：
(function( w ) {
/*
* constructor { Bird } 鸟构造函数
* param { ctx: Context } 绘图环境
* param { img: Image } 鸟图
* param { widthFrame: number } 一排的帧数
* param { heightFrame: number } 一列的帧数
* param { x: number } 鸟的起始x轴坐标
* param { y: number } 鸟的起始y轴坐标
* */
function Bird( ctx, img, widthFrame, heightFrame, x, y ) {
this.ctx = ctx;
this.img = img;
this.widthFrame = widthFrame;
this.heightFrame = heightFrame;
this.x = x;
this.y = y;
// 一个小鸟的宽和高
this.width = this.img.width / this.widthFrame;
this.height = this.img.height / this.heightFrame;
// 当前小鸟渲染的帧数
this.currentFrame = 0;
// 小鸟的下落速度
this.speed = 2;
// 加速度
this.speedPlus = 0.05;
// 绑定事件
this._bind();
}
// 给原型扩展方法
Bird.prototype = {
constructor: Bird,
// 绘制鸟
draw: function() {
// 当下落速度为1的时候，旋转10度
var baseRadian = Math.PI / 180 * 10;
var maxRadian = Math.PI / 180 * 45;
// 根据速度计算旋转的弧度
var rotateRadian = baseRadian * this.speed;
// 限制最大旋转角度为70度
rotateRadian = rotateRadian >= maxRadian? maxRadian : rotateRadian;
this.ctx.save();
/*
* 1、平移到小鸟的中心点
* 2、然后根据下落的速度旋转坐标系
* 3、绘制小鸟，但是绘制的x和y坐标变为负的宽高一半。
* */
this.ctx.translate( this.x + this.width / 2, this.y + this.height / 2 );
this.ctx.rotate( rotateRadian );
this.ctx.drawImage( this.img,
this.width * this.currentFrame, 0, this.width, this.height,
-this.width / 2, -this.height / 2, this.width, this.height );
this.ctx.restore();
},
// 计算下一帧绘制时的数据
update: function() {
// 绘制下一帧
this.currentFrame = ++this.currentFrame >= this.widthFrame? 0 : this.currentFrame;
// 让小鸟不断下落
this.y += this.speed;
// 刷新下落数度
this.speed += this.speedPlus;
},
// 绑定事件
_bind: function() {
var self = this;
this.ctx.canvas.addEventListener( 'click', function() {
self.speed = -1.5;
} );
}
}
// 用来存储已经创建好的鸟实例对象
var bird = null;
// 工厂模式
w.getBird = function( ctx, img, widthFrame, heightFrame, x, y ) {
// 单利模式,整个游戏只要一个bird就够了
if ( !bird ) {
bird = new Bird( ctx, img, widthFrame, heightFrame, x, y );
}
return bird;
};
}( window ));
land:
(function( w ) {
/*
* constrcutor { Land } 大地
* param { ctx: Context } 绘图环境
* param { img: Image } 绘制的图像资源
* param { speed: number } 速度
* */
function Land( ctx, img, speed ) {
this.ctx = ctx;
this.img = img;
this.speed = speed || 2;
Land.len++;
this.x = this.img.width * ( Land.len - 1 );
this.y = this.ctx.canvas.height - this.img.height;
}
// 大地实例的数量
Land.len = 0;
util.extend( Land.prototype, {
draw: function() {
this.ctx.drawImage( this.img, this.x, this.y );
},
update: function() {
this.x -= this.speed;
this.x += this.x <= -this.img.width? this.img.width * Land.len: 0;
}
} );
// 工厂模式
w.getLand = function( ctx, img, speed ) {
return new Land( ctx, img, speed );
};
}( window ));
pipe:
(function( w ) {
/*
* 管道的特点：
* 1、成对出现，所以x轴可以共享，但是y轴不共享
* 2、上下管道之间的路径固定，可以由用户指定
* 3、管道的高度是随机生成的，随机生成上管道的高度，下管道就可以计算了
* 4、当管道走出画布，从右边出来时，高度需要重新随机生成
* */
/*
* constructor { Pipe } 管道
* param { ctx: Context } 绘图环境
* param { imgDown：Image } 口朝下的管道，在画布的上面
* param { imgUp：Image } 口朝上的管道，在画布的下面
* param { space：number } 上下管道的间距
* param { landHeight：number } 大地的高度
* param { speed：number } 速度
* */
function Pipe( ctx, imgDown, imgUp, space, landHeight, speed ) {
this.ctx = ctx;
this.imgDown = imgDown;
this.imgUp = imgUp;
this.space = space;
this.landHeight = landHeight;
this.speed = speed;
// 管道最小高度
this.minHeight = 100;
// 管道默认的宽高
this.width = this.imgDown.width;
this.height = this.imgDown.height;
Pipe.len++;
this.x = 300 + this.width * 3 * ( Pipe.len - 1 );
this.y = 0;
// 初始化管道的坐标
this._init();
}
// 管道实例的数量
Pipe.len = 0;
// 扩展原型方法
util.extend( Pipe.prototype, {
// 初始化管道的坐标
_init: function() {
// 单个管道的最大高度
var maxHeight = this.ctx.canvas.height - this.landHeight - this.space - this.minHeight;
// 随机生成上管道的高度在 50 到 maxHeight 之间
var randomHeight = Math.random() * maxHeight;
randomHeight = randomHeight < this.minHeight? this.minHeight : randomHeight;
// 上面管道的y轴坐标 = 随机生成的高度 - 管道默认的高度
this.downY = randomHeight - this.height;
// 下面管道的y轴坐标 = 随机生成的高度 + 上下管道的间隔
this.upY = randomHeight + this.space;
},
// 绘制管道
draw: function() {
this.ctx.drawImage( this.imgDown, this.x, this.downY );
this.ctx.drawImage( this.imgUp, this.x, this.upY );
this._drawPath();
},
// 根据管道的宽高和坐标绘制对应的路径
_drawPath: function() {
this.ctx.rect( this.x, this.downY, this.width, this.height );
this.ctx.rect( this.x, this.upY, this.width, this.height );
},
// 更新下一帧的数据
update: function() {
this.x -= this.speed;
// 管道走出画布，向右拼接，同时重新生成高度
if ( this.x <= -this.width ) {
this._init();
this.x += this.width * 3 * Pipe.len;
}
}
} );
// 工厂模式
w.getPipe = function( ctx, imgDown, imgUp, space, landHeight, speed ) {
return new Pipe( ctx, imgDown, imgUp, space, landHeight, speed );
};
}( window ));
sky:
(function( w ) {
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
/*
* 绘制背景
* construcotor { Sky } 背景构造函数
* parasm { ctx: Context } 绘制环境
* parasm { img: Image } 背景图像
* parasm { speed: number } 背景速度
* */
function Sky( ctx, img, speed ) {
this.ctx = ctx;
this.img = img;
this.width = this.img.width;
this.height = this.img.height;
this.speed = speed || 2;
// 每创建一个实例，len自增
Sky.len++;
this.x = this.width * ( Sky.len - 1 );
this.y = 0;
}
// 背景实例的个数
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;
}
}
};
w.getSky = function( ctx, img, speed ) {
return new Sky( ctx, img, speed );
};
}( window ));
网友评论