飞翔的小鸟 三（JS封装小鸟，大地，天空等）

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 ));