飛翔的小鳥 三（JS封裝小鳥，大地嫁盲，天空等）

bird：
(function( w ) {
/*
* constructor { Bird } 鳥構造函數(shù)
* param { ctx: Context } 繪圖環(huán)境
* param { img: Image } 鳥圖
* param { widthFrame: number } 一排的幀數(shù)
* param { heightFrame: number } 一列的幀數(shù)
* 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;

    // 當前小鳥渲染的幀數(shù)
    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坐標變?yōu)樨摰膶捀咭话搿?         * */

        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();
    },

    // 計算下一幀繪制時的數(shù)據
    update: function() {

        // 繪制下一幀
        this.currentFrame = ++this.currentFrame >= this.widthFrame? 0 : this.currentFrame;

        // 讓小鳥不斷下落
        this.y += this.speed;

        // 刷新下落數(shù)度
        this.speed += this.speedPlus;

    },

    // 綁定事件
    _bind: function() {

        var self = this;

        this.ctx.canvas.addEventListener( 'click', function() {

            self.speed = -1.5;

        } );
    }
}

// 用來存儲已經創(chuàng)建好的鳥實例對象
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 } 繪圖環(huán)境
* 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;
}

// 大地實例的數(shù)量
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瘾蛋、成對出現(xiàn)，所以x軸可以共享矫限，但是y軸不共享
* 2哺哼、上下管道之間的路徑固定，可以由用戶指定
* 3叼风、管道的高度是隨機生成的取董，隨機生成上管道的高度，下管道就可以計算了
* 4无宿、當管道走出畫布茵汰，從右邊出來時，高度需要重新隨機生成
* */

/*
 * constructor { Pipe } 管道
 * param { ctx: Context } 繪圖環(huán)境
 * 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();
}

// 管道實例的數(shù)量
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 );
    },

    // 更新下一幀的數(shù)據
    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 } 背景構造函數(shù)
 * parasm { ctx: Context } 繪制環(huán)境
 * 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;

    // 每創(chuàng)建一個實例画侣，len自增
    Sky.len++;

    this.x = this.width * ( Sky.len - 1 );
    this.y = 0;
}

// 背景實例的個數(shù)
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 ));

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市堡妒，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌溉卓，老刑警劉巖皮迟，帶你破解...
    沈念sama閱讀 219,270評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異桑寨，居然都是意外死亡伏尼，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門尉尾，熙熙樓的掌柜王于貴愁眉苦臉地迎上來爆阶，“玉大人，你說我怎么就攤上這事”嫱迹” “怎么了班套？”我有些...
    開封第一講書人閱讀 165,630評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長故河。 經常有香客問我吱韭，道長，這世上最難降的妖魔是什么鱼的？ 我笑而不...
    開封第一講書人閱讀 58,906評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任理盆，我火速辦了婚禮，結果婚禮上凑阶，老公的妹妹穿的比我還像新娘猿规。我一直安慰自己，他們只是感情好宙橱，可當我...
    茶點故事閱讀 67,928評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布坎拐。 她就那樣靜靜地躺著，像睡著了一般养匈。 火紅的嫁衣襯著肌膚如雪哼勇。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,718評論 1贊 305
  • 城市分裂傳說
    那天呕乎，我揣著相機與錄音积担，去河邊找鬼。 笑死猬仁，一個胖子當著我的面吹牛帝璧，可吹牛的內容都是我干的。 我是一名探鬼主播湿刽，決...
    沈念sama閱讀 40,442評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼的烁，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了诈闺？” 一聲冷哼從身側響起渴庆，我...
    開封第一講書人閱讀 39,345評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎雅镊，沒想到半個月后襟雷，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
    沈念sama閱讀 45,802評論 1贊 317
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡仁烹，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年耸弄，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卓缰。...
    茶點故事閱讀 40,117評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡计呈，死狀恐怖砰诵，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情捌显，我是刑警寧澤茁彭，帶...
    沈念sama閱讀 35,810評論 5贊 346
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站苇瓣，受9級特大地震影響尉间，放射性物質發(fā)生泄漏。R本人自食惡果不足惜击罪，卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一哲嘲、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧媳禁，春花似錦眠副、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0贊 22
  • 一樁弒父案囱怕，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至毫别，卻和暖如春娃弓，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背岛宦。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工台丛， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人砾肺。 一個月前我還...
    沈念sama閱讀 48,377評論 3贊 373
  • 代替公主和親
    正文 我出身青樓挽霉，卻偏偏與公主長得像，于是被迫代替她去往敵國和親变汪。 傳聞我的和親對象是個殘疾皇子侠坎，可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2贊 355