Chrome自帶恐龍小游戲的源碼研究(二)

　　在上一篇《Chrome自帶恐龍小游戲的源碼研究(一)》中實現了地面的繪制和運動，這一篇主要研究雲朵的繪制。

　　雲朵的繪制通過Cloud構造函數完成。Cloud實現代碼如下：

Cloud.config = {
    HEIGHT:14,  //雲朵sprite的高度
    MAX_CLOUD_GAP:400,  //兩朵雲之間的最大間隙
    MAX_SKY_LEVEL:30,   //雲朵的最大高度
    MIN_CLOUD_GAP:100,  //兩朵雲之間的最小間隙
    MIN_SKY_LEVEL:71,   //雲朵的最小高度
    WIDTH:46,    //雲朵sprite的寬度
    MAX_CLOUDS:6,//最大雲朵數量
    CLOUD_FREQUENCY:.5 //雲朵出現頻率
};

//用於存儲雲朵
Cloud.clouds = [];



/**
* canvas 用於繪制的畫布
* spritePos 在雪碧圖中的坐標
* containerWidth 容器寬度
*/

function Cloud(canvas,spritePos,containerWidth) {
    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");
    this.spritePos = spritePos;
    this.containerWidth = containerWidth;
    this.xPos = containerWidth; //雲朵初始x坐標在屏幕外
    this.yPos = 0;  //雲朵初始高度
    this.remove = false;    //是否移除

    //雲朵之間的間隙400~100
    this.cloudGap = getRandomNum(Cloud.config.MIN_CLOUD_GAP,Cloud.config.MAX_CLOUD_GAP);
    this.init();
}

主要的邏輯代碼在Cloud的原型鏈中：

Cloud.prototype = {
    init:function () {
        //設置雲朵的高度為隨機30~71
        this.yPos = getRandomNum(Cloud.config.MAX_SKY_LEVEL,Cloud.config.MIN_SKY_LEVEL);
        this.draw();
    },
    draw:function () {
        this.ctx.save();
        var sourceWidth = Cloud.config.WIDTH,
            sourceHeight = Cloud.config.HEIGHT;

        this.ctx.drawImage(imgSprite,
            this.spritePos.x,this.spritePos.y,
            sourceWidth,sourceHeight,
            this.xPos,this.yPos,
            sourceWidth,sourceHeight);
        this.ctx.restore();
    },
    //添加雲朵並控制其移動
    updateClouds:function(speed) {
        var numClouds = Cloud.clouds.length;
        if(numClouds) {
            for(var i = numClouds - 1; i >= 0; i--) {
                Cloud.clouds[i].update(speed);
            }

            var lastCloud = Cloud.clouds[numClouds - 1];

            //若當前存在的雲朵數量小於最大雲朵數量

            //並且雲朵位置大於間隙時

            //隨機添加雲朵
            if(numClouds < Cloud.config.MAX_CLOUDS &&
                (DEFAULT_WIDTH - lastCloud.xPos) > lastCloud.cloudGap &&
                Cloud.config.CLOUD_FREQUENCY > Math.random()) {
                this.addCloud();
            }

            //過濾掉已經移出屏幕外的雲朵
            Cloud.clouds = Cloud.clouds.filter(function(obj){
                return !obj.remove;
            });
        } else {
            this.addCloud();
        }
    },
    update:function(speed) {
        //僅繪制符合條件的雲朵
        if(!this.remove) {
            //向左移動
            this.xPos -= Math.ceil(speed);
            this.draw();

            if(!this.isVisible()) {
                this.remove = true;
            }
        }
    },
    //判斷雲朵是否移出屏幕外
    isVisible:function() {
        return this.xPos + Cloud.config.WIDTH > 0;
    },
    //將雲朵添加至數組
    addCloud:function () {
        var cloud = new Cloud(this.canvas,spriteDefinition.CLOUD,DEFAULT_WIDTH);
        Cloud.clouds.push(cloud);
    }
};

最后測試一下這個方法：

window.onload = function () {
    var h = new HorizonLine(c,spriteDefinition.HORIZON);
    var cloud = new Cloud(c,spriteDefinition.CLOUD,DEFAULT_WIDTH);
    var startTime = 0;
    (function draw(time) {
        ctx.clearRect(0,0,600,150);
        time = time || 0;
        h.update(time - startTime,3);
        cloud.updateClouds(0.2);
        startTime = time;
        window.requestAnimationFrame(draw,c);
    })();
};

效果如下：

 

這樣雲朵就繪制好了。