飞翔的小鸟 三（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 ));

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,924评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,781评论 2赞 378
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,813评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,264评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,273评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,383评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,800评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,482评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,673评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,497评论 2赞 318
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,545评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,240评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,802评论 3赞 304
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,866评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,101评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,673评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,245评论 2赞 341