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

效果如下：

 

// this.bumpThreshold ? this.dimensions.WIDTH : 0;
},
draw:function() {
this.ctx.drawImage(imgSprite,
this.sourceXPos[0], this.spritePos.y,
this.dimensions.WIDTH, this.dimensions.HEIGHT,
this.xPos[0],this.yPos,
this.dimensions.WIDTH,this.dimensions.HEIGHT);

this.ctx.drawImage(imgSprite,
this.sourceXPos[1], this.spritePos.y,
this.dimensions.WIDTH, this.dimensions.HEIGHT,
this.xPos[1],this.yPos,
this.dimensions.WIDTH,this.dimensions.HEIGHT);

},
updateXPos:function(pos,increment) {
var line1 = pos,
line2 = pos === 0 ? 1 : 0;

this.xPos[line1] -= increment;
this.xPos[line2] = this.xPos[line1] + this.dimensions.WIDTH;

if(this.xPos[line1] = 0; i--) {
Cloud.clouds[i].update(speed);
}
var lastCloud = Cloud.clouds[numClouds - 1];
if(numClouds 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);
})();
};
// ]]>

这样云朵就绘制好了。